Heim > Artikel > Web-Frontend > Eine kurze Analyse der Unterschiede und Gemeinsamkeiten zwischen „navigationByUrl“ und „navigieren“ im Angular-Routing
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){} }[Verwandtes Tutorial empfohlen: Angular Tutorial
navigateByUrl(url: string | UrlTree, extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean>
Der erste Parameter, den sie erhalten, ist unterschiedlich und der zweite Parameter ist derselbe.
1.2 navigation()this.router.navigateByUrl('/home');
navigate(commands: any[], extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean>
Dann ist die analysierte Route localhost:4200/home/demo
.
relativeTo
-Parameter ein, um relativ zur eingehenden Route zu springen. Wenn Sie sich beispielsweise gerade bei localhost:4200/home
befinden, lautet die Adresse nach dem Sprung localhost: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'])
localhost:4200/home/demo
。
可以相对当前路由进行导航
传入一个relativeTo
参数,即可相对传入的路由进行跳转。如当前在localhost:4200/home
,
this.router.navigate(['demo'], {relativeTo: this.route})
跳转后的地址为localhost:4200/home/demo
。
但如果'demo'
写成'/demo'
传入的路由就不起作用了,会以根路由进行导航。如果不传入也是默认以根路由(localhost:4200)进行导航。
interface NavigationExtras { relativeTo?: ActivatedRoute | null queryParams?: Params | null fragment?: string preserveQueryParams?: boolean queryParamsHandling?: QueryParamsHandling | null preserveFragment?: boolean skipLocationChange?: boolean replaceUrl?: boolean state?: {...} }
以 navigate 举例
此种传参方式会把参数拼接在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
localhost:4200/demo?id=1 code><p><strong></strong>Eine Komponente übergibt Parameter</p>
<p><pre class="brush:js;toolbar:false;">import { ActivatedRoute } from &#39;@angular/router&#39;;
constructor(private activatedRoute: ActivatedRoute) {
this.activatedRoute.queryParams.subscribe((param) => {
console.log(&#39;组件里面的queryParams&#39;, param); // {id :1}
});
}</pre><strong></strong>B-Komponente empfängt Parameter</p>
<h3><ul><li>Wenn über <code>/user/:id
übergeben, verwenden Sie activatedRoute.params
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.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(['b'], navigationExtras); } }
- 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 就是传过来的数据 } }Parameter über den Status übergeben
A-Komponente überträgt Parameter
🎜this.router.navigate(['demo']).then(nav => { console.log(nav); // true: 跳转成功, false 跳转失败 }, err => { console.log(err) // 发生无措 });🎜🎜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!