Maison > Article > interface Web > Une brève analyse des différences et des points communs entre naviguerByUrl et naviguer dans le routage angulaire
Cet article comparera naviguerByUrl et naviguer dans le routage angulaire pour voir leurs différences et leurs points communs. J'espère qu'il vous sera utile ! AAngular NavigateByurl VS Navigate Routing Route Jumps
import { Router, ActivatedRoute } from '@angular/router'; export class xxx{ constructor(private router: Router, private route: ActivatedRoute){} }[Recommandation du didacticiel connexe : Tutoriel angulaire
navigateByUrl(url: string | UrlTree, extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean>
Le premier paramètre qu'ils reçoivent est différent et le deuxième paramètre est le même.
1.2 naviguer()this.router.navigateByUrl('/home');
navigate(commands: any[], extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean>
Ensuite, la route analysée est localhost:4200/home/demo
.
relativeTo
pour sauter par rapport à l'itinéraire entrant. Par exemple, si vous êtes actuellement à localhost:4200/home
, l'adresse après le saut est localhost:4200/home/demo
. Mais si 'demo'
est écrit sous la forme '/demo'
, la route entrante ne fonctionnera pas et la route racine sera utilisée pour la navigation. Si elle n'est pas transmise, la route racine (localhost:4200) sera utilisée par défaut pour la navigation. 2. Points communs :
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>Le composant A transmet les paramètres</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>Le composant B reçoit les paramètres</p>
<h3><ul><li>S'il est passé via <code>/user/:id
, utilisez activatedRoute.params
Cette méthode transférera les données Existe dans l'historique du navigateur, l'état doit être un objet, et utilisera getCurrentNavigation pour les récupérer dans la sous-route.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); } }
- Si passé via
/user?id=1
, utilisezactivatedRoute.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 就是传过来的数据 } }passez les paramètres via state
Un composant transmet les paramètres
🎜this.router.navigate(['demo']).then(nav => { console.log(nav); // true: 跳转成功, false 跳转失败 }, err => { console.log(err) // 发生无措 });🎜🎜Le composant B reçoit des paramètres🎜🎜rrreee🎜2.2 ont tous des rappels🎜rrreee🎜🎜Plus de mises à jour d'utilisation sur github :🎜🎜https://github.com/deepthan/blog-angular 🎜 🎜🎜Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Introduction à la programmation🎜 ! ! 🎜
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!