In diesem Artikel werden navigationByUrl und die Navigation im Angular-Routing verglichen, um deren Unterschiede und Gemeinsamkeiten zu erkennen. Ich hoffe, dass er für Sie hilfreich sein wird! AAngular NavigateByurl VS Navigate Routing

import { Router, ActivatedRoute } from '@angular/router'; export class xxx{ constructor(private router: Router, private route: ActivatedRoute）{} }

]1 Muss ein ==absoluter Pfad== String sein.

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

Der erste Parameter, den sie erhalten, ist unterschiedlich und der zweite Parameter ist derselbe.

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

Der erste Parameter ist ein Array

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

Dann ist die analysierte Routelocalhost:4200/home/demo.

Geben Sie einenrelativeTo-Parameter ein, um relativ zur eingehenden Route zu springen. Wenn Sie sich beispielsweise gerade beilocalhost:4200/homebefinden, lautet die Adresse nach dem Sprunglocalhost:4200/home/demo.

Aber wenn'demo'als'/demo'geschrieben wird, funktioniert die eingehende Route nicht und die Stammroute wird für die Navigation verwendet. Wenn nicht übergeben, wird standardmäßig die Root-Route (localhost:4200) für die Navigation verwendet.

2. Gemeinsame Punkte:

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

Nach dem Login kopieren

2.1 Die Methode zur Übergabe von Parametern ist die gleiche

localhost:4200/home/demo。

可以相对当前路由进行导航

传入一个relativeTo参数，即可相对传入的路由进行跳转。如当前在localhost:4200/home,

this.router.navigate(['demo'], {relativeTo: this.route})

Nach dem Login kopieren

跳转后的地址为localhost:4200/home/demo。

但如果'demo'写成'/demo'传入的路由就不起作用了，会以根路由进行导航。如果不传入也是默认以根路由(localhost:4200)进行导航。

2. 共同点：

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

2.1 传递参数方式一样

以 navigate 举例

通过queryParams传参

此种传参方式会把参数拼接在url上，如localhost:4200/demo?id=1

A组件传递参数

this.router.navigate(['demo'], {queryParams: {id: 1} , relativeTo: this.route})

B组件接收参数

• 若是通过/user/:id方式传递过来用activatedRoute.params

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

• 若是通过/user?id=1方式传递用activatedRoute.queryParams

Parameter über queryParams übergeben

Diese Methode der Parameterübergabe verbindet die Parameter mit der URL, z. B.localhost:4200/demo?id=1

Eine Komponente übergibt Parameter

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

Nach dem Login kopieren

B-Komponente empfängt Parameter

• Wenn über /user/:idübergeben, verwenden SieactivatedRoute.params< /code>

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); } }

Nach dem Login kopieren

• Wenn über /user?id=1übergeben, verwenden SieactivatedRoute.queryParams

  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 就是传过来的数据 } }

  Nach dem Login kopieren

  Parameter über den Status übergeben

  Diese Methode überträgt die Daten. Sie sind im Verlauf des Browsers vorhanden. Der Status muss ein Objekt sein und mit getCurrentNavigation in der Unterroute abgerufen werden.

  A-Komponente überträgt Parameter

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

  Nach dem Login kopieren
  b-Komponenten empfängt Parameter Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !

  Das obige ist der detaillierte Inhalt vonEine kurze Analyse der Unterschiede und Gemeinsamkeiten zwischen „navigationByUrl' und „navigieren' im Angular-Routing. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!