angular navigateByUrl と navigate ルートジャンプ

import { Router, ActivatedRoute } from &#39;@angular/router&#39;;

export class xxx{
   constructor(private router: Router, private route: ActivatedRoute）{} 
}

ログイン後にコピー

[関連チュートリアルの推奨事項: "angular チュートリアル" ]

1. 相違点

1.1 navigateByUrl()

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

ログイン後にコピー

最初のパラメータは == 絶対パス == の文字列である必要があります。

 this.router.navigateByUrl(&#39;/home&#39;);

ログイン後にコピー

受け取った最初のパラメータは異なりますが、2 番目のパラメータは同じです。

1.2 navigate()

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

ログイン後にコピー

最初のパラメータは配列です

this.router.navigate([&#39;home&#39;, &#39;demo&#39;])

ログイン後にコピー

その後、解析されたルートは次のようになりますローカルホスト:4200/home/demo。

現在のルートを基準にして移動できます。

relativeTo パラメーターを渡すと、受信ルートを基準にしてジャンプできます。たとえば、現在 localhost:4200/home にある場合、

this.router.navigate([&#39;demo&#39;], {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 パラメータの受け渡し方法は同じです

ナビゲーションを例に挙げます

queryParams を介してパラメータを渡す

パラメータを渡すこの方法では、localhost:4200/demo?id=1

# などの URL 上のパラメータが結合されます。

##A コンポーネントはパラメータを渡します

this.router.navigate([&#39;demo&#39;], {queryParams: {id: 1} , relativeTo: this.route})

ログイン後にコピー

B コンポーネントはパラメータを受け取ります

/user/:id# を介して渡された場合##、使用 activatedRoute.params

import { ActivatedRoute } from &#39;@angular/router&#39;;

constructor(private activatedRoute: ActivatedRoute) {
    this.activatedRoute.params.subscribe((param) => {
      console.log(&#39;组件里面的param&#39;, param);// {id :1}
    });
}

ログイン後にコピー

を介して渡された場合、activatedRoute.queryParams# を使用します##<div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">ログイン後にコピー</div></div>状態を介したパラメータの受け渡し

このメソッドはブラウザの履歴にデータを保存します。状態はオブジェクトである必要があり、サブルートの getCurrentNavigation を使用して取得する必要があります。

#A コンポーネントはパラメータを渡します

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

ログイン後にコピー

B コンポーネントはパラメータを受け取ります

import { Component } from &#39;@angular/core&#39;;
import { Router } from &#39;@angular/router&#39;;

@Component({
  selector: &#39;b-component&#39;
})
export class BComponent {
  constructor(private router: Router) { 
    const navigation = this.router.getCurrentNavigation();
    const state = navigation.extras.state as {id: number};
    // state.id 就是传过来的数据
  }
}

ログイン後にコピー

2.2 両方ともコールバックがあります

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

ログイン後にコピー

github での使用法に関するその他の最新情報:
https://github.com/deepthan/blog-angular

プログラミング関連の知識については、こちらをご覧ください:
プログラミング入門
! ！
以上がAngular ルーティングにおける navigateByUrl と navigate の違いと共通点の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。