angular 路由以及跳转传参

路由是实现导航的一种方式，一个url即是一个路由，也对应着一个页面。

以下对常用的路由知识进行了总结。

一、路由传值的两种方式：

1、使用params方式

1）路由形式：dev.xxx.com/main/xxx/xxx;dctId=xxx;dcName=xxx

2）跳转路由：

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html'
})
export class MyComponent {
constructor(private router: Router) {}

navigateToAnotherPage() {
const id = 123; // 假设这是我们要传递的参数
this.router.navigate(['/another-page', id]);
const id = 123; // 假设这是我们要传递的参数
this.router.navigate(['/another-page', id]);
或者 this.router.navigate([/another-page,{dctId:xxx,dcName:xxx}])
}
}
3)路由参数订阅：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
selector: 'app-another-page',
templateUrl: './another-page.component.html'
})
export class AnotherPageComponent implements OnInit {
id: number;
constructor(private route: ActivatedRoute) {}

ngOnInit() {

this.route.params.subscribe(params => {
 this.id = params['id'];
或者
this.dctId = params['dctId'];
this.dcName = params['dcName'];
});

}
}

2、使用queryParams方式

1）路由形式：dev.xxx.com/main/dc/xxx/xxx?dcId=xxxx&dcName=xxxx。

2）跳转路由：
引入等先决条件参考第一种方式。
this.router.navigate([/another-page,{queryParams：{dctId:xxx,dcName:xxx}}])
3)路由参数订阅：
ngOnInit() {
this.route.queryParams.subscribe(params => {
this.dctId = params['dctId'];
this.dcName = params['dcName'];
});

二、路由指令：

1、RouterOutlet

 RouterOutlet是一个来自路由库的组件。 路由器会在<router-outlet>标签中显示视图。一个模板中只能有一个未命名的<router-outlet>比如，下面的例子中，当路由到达/chassis 时，<router-outlet>标签中将显示chassis路由所对应的组件。

<nav>
<a [routerLink]=["chaiss"] routeLinkActive="active" >Home</a>
<a [routerLink]=["/blade"] routeLinkActive="active">About</a>
</nav>
<router-outlet></router-outlet>
2、RouterLink

在上面的例子A标签中，有一个绑定RouterLink指令的属性绑定：routerLink。形如 [routerLink]="['chaiss']"，也可写作 routerLink="chassis"。

  还可以使用传入路径片段的数组，如下：

<a [routerLink]="['/chassis',chassisId,'chName',dcName,{details:true}]">About</a>

将会动态生成下面的路由地址：/chassis/11dg233/dcName/xian;details=true。

使用queryParams和 fragment 能够为url增加查询参数和hash值。如：
<a [routerLink]="['/chassis',chassisId,'chName',dcName]" [queryParams]="{location:pod1}" fragment="education">About</a>
将会动态生成下面的路由地址：/chassis/11dg233/dcName/xian#education?location=pod1。

3、RouteLinkActive

  在上面的例子A标签中，每个A标签还有一个到routeLinkActive指令的属性绑定，就像routerLinkActive="..."

等号（=）右侧的模板表达式包含用空格分隔的一些CSS类。当路由激活时就会给A元素增加对应的样式（反之则移除）。

RouterLinkActive指令会基于当前的RouterState对象来为激活的RouterLink切换CSS类。 这会一直沿着路由树往下进行级联处理，因此使用routerLinkActive时，

父路由链接和子路由链接都会被激活。

比如，以下例子中/chassis 和 /chassis/chassisadefr233 两个路由下，都会为A元素添加active-lick类。

<a [routerLink]=["chaiss"] routeLinkActive="active-lick" >Home</a>
<a [routerLink]=[" /chassis/chassisadefr233"] >Home</a>
将会动态生成下面的路由地址：/chassis/11dg233/dcName/xian#education?location=pod1。``

要改变这种行为，可以把[routerLinkActiveOptions]绑定到{exact: true}表达式。 如果使用了{ exact: true }，那么只有在其URL与当前URL精确匹配时才会激活指定的RouterLink。以下例子中：只有 /chassis/chassisadefr233路由，才会为A元素添加active-lick类。

<a [routerLink]=[" /chassis/chassisadefr233"] routeLinkActive="active-lick" [routerLinkActiveOptions]:"{exact: true}">Home</a>