Augular4 第三章（上） 路由基本概念，路由的配置，路由的参数传递

1.路由的基本概念

（1）Routes:路由的配置，保存着哪个URL对应展示哪个组件，以及在哪个RouterOutlet中展示组件
（2）RouterOutlet:在html中标记路由内容呈现位置的占位符指令
（3）Router :负责在运行时执行路由的对象，可以通过调用其navigate()和navigateByUrl()方法来导航到一个指定的路由
（4）RouterLink:在HTML中声明路由导航用的指令
（5）ActivateRoute:当前激活的路由对象，保存着当前的路由信息，如路由地址，路由参数等等。

2.路由应用实例

（1）最简单的路由配置

app-routing.module.ts

const routes:Routes = [
 {path:'',component:HomeComponent },//默认展示HomeComponnet
 {path:'stock',component:StockComponent},
 {path:'**',component:Code404Component}
];

app.component.html ：

<a [routerLink]='["/"]'>主页</a>
<a [routerLink]='["/stock"]'>股票详情</a>
<input type="button"value="股票详情" (click)="toStockDetail()" />
<router-outlet></router-outlet>

app.component.ts：

import { Component } from '@angular/core';
import{Router}from"@angular/router";
@Component({
 selector:'app-root',
 templateUrl:'./app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title='app';
constructor(private router:Router){
}
toStockDetail(){
this.router.navigate(['/stock']);
}
}

（2）路由时传递数据

A.在查询参数中传递参数

路由定义[Routes]	路径格式	目标组件
不传参数	/product?id=1&name=2	ActivatedRoute.queryParams[id]

app-routing.module.ts ：

constroutes:Routes= [
  {path:'',component:HomeComponent }, //默认展示HomeComponnet
  {path:'stock',component:StockComponent},
  {path:'**',component:Code404Component}
];

app.component.html ：

<a [routerLink]='["/"]'>主页</a>
<a [routerLink]='["/stock"]' [queryParams]="{id:1}">股票详情</a>
<router-outlet></router-outlet>

app\stock\stock.component.ts，目标组件中获取参数值：

import { Component, OnInit } from'@angular/core';
import{ActivatedRoute,Params}from'@angular/router';
@Component({
  selector:'app-stock',
  templateUrl:'./stock.component.html',
  styleUrls: ['./stock.component.css']
})
export class StockComponentimplementsOnInit {
  public stockId:number;
  constructor(private    routeInfo:ActivatedRoute) { }
ngOnInit() {
this.stockId=this.routeInfo.snapshot.queryParams["id"];
}
}

app\stock\stock.component.html，目标模板中显示参数值：{{stockId}}

B.在路由的路径中来传递数据，在路径中传递参数要修改路由配置信息

路由定义[Routes]	路径格式	目标组件
{path:/product/:id}	/product/1	activatedRoute.params[id]

app-routing.module.ts ：

const routes:Routes= [
  {path:'',component:HomeComponent },//默认展示HomeComponnet
  {path:'stock/:id',component:StockComponent},
  {path:'**',component:Code404Component}
];

app.component.html ：

<a [routerLink]='["/"]'>主页</a>
<a [routerLink]='["/stock",1]'>股票详情</a>
<input type="button"value="股票详情" (click)="toStockDetail()" />
<router-outlet></router-outlet>

app.component.ts：

import { Component } from '@angular/core';
import{Router}from"@angular/router";
@Component({
  selector:'app-root',
  templateUrl:'./app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title='app';
  constructor(privaterouter:Router){
}
  toStockDetail(){
    this.router.navigate(['/stock',2]);
  }
}

app\stock\stock.component.ts，目标组件中获取参数值：

import { Component, OnInit } from'@angular/core';
import{ActivatedRoute,Params}from'@angular/router';
@Component({
  selector:'app-stock',
  templateUrl:'./stock.component.html',
  styleUrls: ['./stock.component.css']
})
export class StockComponentimplementsOnInit {
  public stockId:number;
  constructor(private routeInfo:ActivatedRoute) { }
  ngOnInit() {
  //订阅，防止自身跳到自身
  this.routeInfo.params.subscribe((params:Params)=>this.stockId=params["id"])
  //快照,不会从自身跳到自身，节约资源
  this.stockId=this.routeInfo.snapshot.params["id"];
  //同一个组件跳转，ngOnit()不会被重复调用，因此在同一个组件同一个参数不同的值，获取参数值需要订阅方式
}
}

C.在路由配置中传递数据

路由定义[Routes]	路径格式	目标组件
{ path: 'stock/:id' , component:StockComponent , data: [{ isPro: true }]},	/product/1	ActivatedRoute.data[0][isProd]

app-routing.module.ts ：

const routes:Routes= [
  {path:'',component:HomeComponent },//默认展示HomeComponnet
  {path:'stock/:id',component:StockComponent,data:[{isPro:true}]},
  {path:'**',component:Code404Component}
];

app\stock\stock.component.ts，目标组件中获取参数值：

import { Component, OnInit } from'@angular/core';
import{ActivatedRoute,Params}from'@angular/router';
@Component({
  selector:'app-stock',
  templateUrl:'./stock.component.html',
  styleUrls: ['./stock.component.css']
})
export class StockComponentimplementsOnInit {
 public stockId:number;
 private isPro:boolean;
 constructor(private routeInfo:ActivatedRoute) { }
  ngOnInit() {
//订阅
  this.routeInfo.params.subscribe((params:Params)=>this.stockId=params["id"])
//     this.stockId=this.routeInfo.snapshot.params["id"];
  this.isPro=this.routeInfo.snapshot.data[0]["isPro"];
}
}

app\stock\stock.component.html {{isPro}} {{stockId}}