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

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

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

Der erste Parameter ist ein Array

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

Dann ist die analysierte Route localhost:4200/home/demo.

Sie können relativ zur aktuellen Route navigieren

Geben Sie einen 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'])

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

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

Nehmen Sie die Navigation als Beispiel

Parameter über queryParams übergeben

Diese Methode der Parameterübergabe verbindet die Parameter mit der URL, z. B. localhost:4200/demo?id=1</ code><p><strong></strong>Eine Komponente übergibt Parameter</p><p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;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">Nach dem Login kopieren</div></div><strong></strong>B-Komponente empfängt Parameter</p><h3 id="ul-li-Wenn-über-code-user-id-code-übergeben-verwenden-Sie-code-activatedRoute-params-code"><ul><li>Wenn über <code>/user/:id übergeben, verwenden Sie activatedRoute.params< /code></h3><blockquote><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;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">Nach dem Login kopieren</div></div> <ul><li>Wenn über <code>/user?id=1 übergeben, verwenden Sie 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 就是传过来的数据
  }
}

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) // 发生无措
  });

🎜🎜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!