Analisis ringkas tentang perbezaan dan persamaan antara navigateByUrl dan navigasi dalam penghalaan Sudut

青灯夜游

Lepaskan： 2021-11-12 11:07:29

ke hadapan

3036 orang telah melayarinya

Artikel ini akan membandingkan navigateByUrl dan menavigasi dalam penghalaan Sudut untuk melihat perbezaan dan persamaannya, saya harap ia akan membantu anda!

Analisis ringkas tentang perbezaan dan persamaan antara navigateByUrl dan navigasi dalam penghalaan Sudut

navigasi sudutByUrl vs lompat laluan navigasi

import { Router, ActivatedRoute } from &#39;@angular/router&#39;;

export class xxx{
   constructor(private router: Router, private route: ActivatedRoute）{} 
}

Salin selepas log masuk

[Cadangan tutorial berkaitan: "tutorial sudut 》】

1. Perbezaan

1.1 navigateByUrl()

navigateByUrl(url: string | UrlTree, extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean>

Salin selepas log masuk

Parameter pertama mestilah == laluan mutlak== rentetan.

 this.router.navigateByUrl(&#39;/home&#39;);

Salin selepas log masuk

Parameter pertama yang mereka terima adalah berbeza, dan parameter kedua adalah sama.

1.2 navigate()

navigate(commands: any[], extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean>

Salin selepas log masuk

Parameter pertama ialah array

this.router.navigate([&#39;home&#39;, &#39;demo&#39;])

Salin selepas log masuk

Jadi ia dihuraikan Routing ialah localhost:4200/home/demo.

boleh dilayari relatif kepada laluan semasa

Lepasi dalam parameter relativeTo untuk melompat relatif kepada laluan masuk. Contohnya, jika anda kini berada di localhost:4200/home,

this.router.navigate([&#39;demo&#39;], {relativeTo: this.route})

Salin selepas log masuk

, alamat selepas lompatan ialah localhost:4200/home/demo.

Tetapi jika 'demo' ditulis sebagai '/demo', laluan masuk tidak akan berfungsi dan laluan akar akan digunakan untuk navigasi. Jika tidak diluluskan, laluan akar (localhost:4200) akan digunakan untuk navigasi secara lalai.

2. Titik biasa:

interface NavigationExtras {
  relativeTo?: ActivatedRoute | null
  queryParams?: Params | null
  fragment?: string
  preserveQueryParams?: boolean
  queryParamsHandling?: QueryParamsHandling | null
  preserveFragment?: boolean
  skipLocationChange?: boolean
  replaceUrl?: boolean
  state?: {...}
}

Salin selepas log masuk

2.1 Kaedah lulus parameter adalah sama

Ambil navigasi sebagai contoh

Melalui parameter melalui queryParams

Kaedah menghantar parameter ini akan menggabungkan parameter pada url, seperti localhost:4200/demo?id=1

Parameter lulus komponen

this.router.navigate([&#39;demo&#39;], {queryParams: {id: 1} , relativeTo: this.route})

Salin selepas log masuk

Komponen B menerima parameter

Jika ia melalui kaedah /user/:id, gunakan activatedRoute.params

import { ActivatedRoute } from &#39;@angular/router&#39;;

constructor(private activatedRoute: ActivatedRoute) {
    this.activatedRoute.params.subscribe((param) => {
      console.log(&#39;组件里面的param&#39;, param);// {id :1}
    });
}

Salin selepas log masuk

Jika melalui kaedah /user?id=1, gunakan activatedRoute.queryParams

import { ActivatedRoute } from &#39;@angular/router&#39;;

constructor(private activatedRoute: ActivatedRoute) {
    this.activatedRoute.queryParams.subscribe((param) => {
      console.log(&#39;组件里面的queryParams&#39;, param); // {id :1}
    });
}

Salin selepas log masuk

untuk menghantar parameter melalui keadaan

simpan data dalam sejarah penyemak imbas Keadaan mestilah Objek, diambil menggunakan getCurrentNavigation dalam sub-laluan.

Komponen melepasi parameter

import { Component, Input } from &#39;@angular/core&#39;;
import { Router, NavigationExtras } from &#39;@angular/router&#39;;

@Component({
  selector: &#39;a-component&#39;,
  template: `
    <button (click)="test()">Test</button>
  `,
})
export class AComponent  {
  constructor(private router: Router){}

  test(){
    const navigationExtras: NavigationExtras = {state: {id: 1}};
    this.router.navigate([&#39;b&#39;], navigationExtras);
  }
}

Salin selepas log masuk

Komponen B menerima parameter

import { Component } from &#39;@angular/core&#39;;
import { Router } from &#39;@angular/router&#39;;

@Component({
  selector: &#39;b-component&#39;
})
export class BComponent {
  constructor(private router: Router) { 
    const navigation = this.router.getCurrentNavigation();
    const state = navigation.extras.state as {id: number};
    // state.id 就是传过来的数据
  }
}

Salin selepas log masuk

2.2 Kedua-duanya mempunyai panggilan balik

 this.router.navigate([&#39;demo&#39;]).then(nav => {
    console.log(nav); // true: 跳转成功， false 跳转失败
  }, err => {
    console.log(err) // 发生无措
  });

Salin selepas log masuk

Lagi kemas kini penggunaan pada github:

https://github.com/deepthan/blog-angular

Lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Pengenalan kepada Pengaturcaraan! !

Atas ialah kandungan terperinci Analisis ringkas tentang perbezaan dan persamaan antara navigateByUrl dan navigasi dalam penghalaan Sudut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!