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

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

navigasi sudutByUrl vs lompat laluan navigasi

import { Router, ActivatedRoute } from '@angular/router';

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

[Cadangan tutorial berkaitan: "tutorial sudut 》】

1. Perbezaan

1.1 navigateByUrl()

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

Parameter pertama mestilah == laluan mutlak== rentetan.

 this.router.navigateByUrl('/home');

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

1.2 navigate()

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

Parameter pertama ialah array

this.router.navigate(['home', 'demo'])

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(['demo'], {relativeTo: this.route})

, 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?: {...}
}

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(['demo'], {queryParams: {id: 1} , relativeTo: this.route})

Komponen B menerima parameter

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

import { ActivatedRoute } from '@angular/router';

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

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

import { ActivatedRoute } from '@angular/router';

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

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 '@angular/core';
import { Router, NavigationExtras } from '@angular/router';

@Component({
  selector: 'a-component',
  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);
  }
}

Komponen B menerima parameter

import { Component } from '@angular/core';
import { Router } from '@angular/router';

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

2.2 Kedua-duanya mempunyai panggilan balik

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

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!