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

] 1 Doit être une chaîne == chemin absolu ==.

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

Le premier paramètre est un tableau

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

Ensuite, la route analysée est localhost:4200/home/demo.

Vous pouvez naviguer par rapport à l'itinéraire actuel

Passez un paramètre 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'])

2.1 La méthode de passage des paramètres est la même

localhost:4200/home/demo。

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

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

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

跳转后的地址为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

Prendre la navigation comme un exemple

Transmettre les paramètres via queryParams

Cette méthode de transmission des paramètres fusionnera les paramètres sur l'URL, tels que localhost:4200/demo?id=1</ code><p><strong></strong>Le composant A transmet les paramètres</p><p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">import { ActivatedRoute } from &amp;#39;@angular/router&amp;#39;; constructor(private activatedRoute: ActivatedRoute) { this.activatedRoute.queryParams.subscribe((param) =&gt; { console.log(&amp;#39;组件里面的queryParams&amp;#39;, param); // {id :1} }); }</pre><div class="contentsignin">Copier après la connexion</div></div><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< /code></h3><blockquote><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">import { Component, Input } from &amp;#39;@angular/core&amp;#39;; import { Router, NavigationExtras } from &amp;#39;@angular/router&amp;#39;; @Component({ selector: &amp;#39;a-component&amp;#39;, template: ` &lt;button (click)=&quot;test()&quot;&gt;Test&lt;/button&gt; `, }) export class AComponent { constructor(private router: Router){} test(){ const navigationExtras: NavigationExtras = {state: {id: 1}}; this.router.navigate([&amp;#39;b&amp;#39;], navigationExtras); } }</pre><div class="contentsignin">Copier après la connexion</div></div> <ul><li>Si passé via <code>/user?id=1, utilisez activatedRoute.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

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.

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!