淺析Angular路由中navigateByUrl和navigate的區別和共同點

青灯夜游

發布： 2021-11-12 11:07:29

轉載

3037 人瀏覽過

這篇文章給大家比較一下Angular路由中navigateByUrl和navigate，看看他們的不同點和共同點，希望對大家有幫助！

淺析Angular路由中navigateByUrl和navigate的區別和共同點

angular navigateByUrl vs 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;);

登入後複製

他兩個接收的第一個參數不同，第二個參數相同。

1.2 navigate()

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

登入後複製

第一個參數是一個陣列

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

登入後複製

那麼解析的路由就是localhost: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 傳遞參數方式一樣

##以navigate 舉例

#透過queryParams傳參

此種傳參方式會將參數拼接在url上，如

localhost:4200/demo?id=1

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

登入後複製

/user?id=1方式傳遞用activatedRoute.queryParams

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

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

登入後複製

透過state傳參

此種方式會把資料存在瀏覽器的歷史記錄中，state必須是一個對象，在子路由中使用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) // 发生无措
  });

登入後複製