[JavaScript知识库]【angular-实践】路由传参跳转

传参方式

• routerLink传参
  • routerLink
  • routerLink && queryParams
• 路由中传参
• navigate传参
• navigateByUrl（待完善）

方式一 routerLink

1 routerLink

routerLink跳转

<!-- 3种方法: 设置参数变量的 值 -->
<a routerLink="/test/1"> 跳转1</a>
<a [routerLink]="['/test/2']"> 跳转2 </a>
<a [routerLink]="['/test',3]"> 跳转3 </a>

对应路由

 { path: 'test/:id', component: PropertyComponent }

接收参数

// ActivatedRoute: 当前激活的路由对象，保存着当前路由的信息，如路由地址，路由参数等
import { ActivatedRoute } from '@angular/router';
...此处省略一万字...
constructor(private route: ActivatedRoute) { }
ngOnInit() {
  // 1. 使用 ActivatedRoute 的 snapshot 快照的 paramMap 的 get(key) 方法
  const id = this.route.snapshot.paramMap.get('id');
  // 2. 使用 ActivatedRoute 的 snapshot 快照的 params 对象
  const id = this.route.snapshot.params['id'];
}

或

import { ActivatedRoute, Params } from '@angular/router';
...此处省略一万字...
constructor(private route: ActivatedRoute) { }
ngOnInit() {
  // 使用params的订阅 subscribe(不能使用 paramMap.subscribe)
  this.route.params.subscribe((params: Params) => {
    const id = params['id'];
  });
}

2 routerLink && queryParams

<!-- 在html的a标签里直接设置查询参数 key:value，不在路由中配置 -->
<a [routerLink]="['/test']" [queryParams]="{id: 4,title:'新闻详情'}">路由跳转</a>

<!-- 以下不正确 -->
<a [routerLink]="['/test',{queryParams:{id: 4,title:'新闻详情'}}]"> 错误例子 </a>
<a routerLink=["/detail",{queryParams:object}]></a>

对应路由
(路径后没有参数)

{   // 路由路径：此处不设置参数 
    path: 'test', component: NewsDetailComponent,
}

接收参数

// 1. 使用 ActivatedRoute 的 snapshot 快照的 queryParams 对象
const id = this.route.snapshot.queryParams['id'];
const id = this.route.snapshot.queryParams['title'];

// 2. queryParams的订阅
this.route.queryParams.subscribe((params: Params) => {
    const id = params['id'];
    const title = params['title'];
});

方式二 路由中传参

<a routerLink="/test"> 跳转到详情页 </a>

{
  path: 'test',
  component: NewsDetailComponent,
  data: {
    title: '我是详情页1',
    subtitle: '我是详情页2'
  }
}

获取参数

// 获取参数: 一个个获取
this.title = this.routeInfo.snapshot.data['title'];
this.title = this.routeInfo.snapshot.data['subtitle'];

方式三 navigate

单个参数

// 在路由路径中配置参数的名称，此处带了一个叫 id 的参数变量
{path: 'news-detail/:id', component: NewsDetailComponent}

方法中调用

this.router.navigate(['/home/news/news-detail/1']);
this.router.navigate(['/home/news/news-detail',1]);

接受参数

// ActivatedRoute: 当前激活的路由对象，保存着当前路由的信息，如路由地址，路由参数等
import { ActivatedRoute } from '@angular/router';
...此处省略一万字...
constructor(private route: ActivatedRoute) { }
ngOnInit() {
  // 1. 使用 ActivatedRoute 的 snapshot 快照的 paramMap 的 get(key) 方法
  const id = this.route.snapshot.paramMap.get('id');
  // 2. 使用 ActivatedRoute 的 snapshot 快照的 params 对象
  const id = this.route.snapshot.params['id'];
  console.log('id==>', id);
}

或

import { ActivatedRoute, Params } from '@angular/router';
...此处省略一万字...
constructor(private route: ActivatedRoute) { }
ngOnInit() {
  // 使用params的订阅 subscribe(不能使用 paramMap.subscribe)
  this.route.params.subscribe((params: Params) => {
    const id = params['id'];
    console.log('id==>', id);
  });
}

传多个参数

{   // 路由路径：此处不设置参数 
    path: 'news-detail', component: NewsDetailComponent,
}

this.router.navigate(['/home/news/news-detail'], 
    { queryParams: { 'id': '2' ,title:'详情页'} });

接收

const id = this.route.snapshot.queryParams['id'];
const id = this.route.snapshot.queryParams['title'];

或

// 2. queryParams的订阅
this.route.queryParams.subscribe((params: Params) => {
    const id = params['id'];
    const title = params['title'];
    console.log('id==>', id);
    console.log('title==>', title);
});

参考

• Angular6 路由跳转与传参
• angular 路由跳转以及传参的几种方式