浅析Angular路由中navigateByUrl和navigate的区别和共同点

169 阅读 0 评论 112 点赞

我是靠谱客的博主玩命大炮，这篇文章主要介绍浅析Angular路由中navigateByUrl和navigate的区别和共同点，现在分享给大家，希望可以做个参考。

本篇文章给大家对比一下Angular路由中navigateByUrl和navigate，看看他们的不同点和共同点，希望对大家有所帮助！

angular navigateByUrl vs navigate 路由跳转

复制代码import { Router, ActivatedRoute } from '@angular/router';

export class xxx{
   constructor(private router: Router, private route: ActivatedRoute）{} 
}1
2
3
4
5
import { Router, ActivatedRoute } from '@angular/router';

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>1
navigateByUrl(url: string | UrlTree, extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean>
登录后复制

第一个参数必须是==绝对路径==的字符串。

复制代码 this.router.navigateByUrl('/home');1
this.router.navigateByUrl('/home');
登录后复制

他俩接收的第一个参数不同，第二个参数相同。

1.2 navigate()

复制代码navigate(commands: any[], extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean>1
navigate(commands: any[], extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean>
登录后复制

第一个参数是一个数组

复制代码this.router.navigate(['home', 'demo'])1
this.router.navigate(['home', 'demo'])
登录后复制

那么解析的路由就是localhost:4200/home/demo。

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

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

复制代码this.router.navigate(['demo'], {relativeTo: this.route})1
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?: {...}
}1
2
3
4
5
6
7
8
9
10
11
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传参

此种传参方式会把参数拼接在url上，如localhost:4200/demo?id=1

A组件传递参数

复制代码this.router.navigate(['demo'], {queryParams: {id: 1} , relativeTo: this.route})1
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}
    });
}1
2
3
4
5
6
7
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

复制代码import { ActivatedRoute } from '@angular/router';

constructor(private activatedRoute: ActivatedRoute) {
    this.activatedRoute.queryParams.subscribe((param) => {
      console.log('组件里面的queryParams', param); // {id :1}
    });
}1
2
3
4
5
6
7
import { ActivatedRoute } from '@angular/router';

constructor(private activatedRoute: ActivatedRoute) {
    this.activatedRoute.queryParams.subscribe((param) => {
      console.log('组件里面的queryParams', param); // {id :1}
    });
}
登录后复制

通过state传参

此种方式会把数据存在浏览器的历史记录中，state必须是一个对象，在子路由中使用getCurrentNavigation取出。

A组件传递参数

复制代码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);
  }
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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);
  }
}
登录后复制

B组件接收参数

复制代码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 就是传过来的数据
  }
}1
2
3
4
5
6
7
8
9
10
11
12
13
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 就是传过来的数据
  }
}
登录后复制

2.2 均有回调

复制代码 this.router.navigate(['demo']).then(nav => {
    console.log(nav); // true: 跳转成功， false 跳转失败
  }, err => {
    console.log(err) // 发生无措
  });1
2
3
4
5
this.router.navigate(['demo']).then(nav => {
    console.log(nav); // true: 跳转成功， false 跳转失败
  }, err => {
    console.log(err) // 发生无措
  });
登录后复制

最后

以上就是玩命大炮最近收集整理的关于浅析Angular路由中navigateByUrl和navigate的区别和共同点的全部内容，更多相关浅析Angular路由中navigateByUrl和navigate内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。