Angular学习笔记（四）之路由参数和嵌套路由

ActivatedRoute 路由参数

当前激活的路由对象，保存这当前路由的信息，如路由地址，路由参数等。

三种传参方式

1. 在查询参数中传递数据 =>
   html形式如：<a [routerLink]="['/stocks']" [queryParams]="{id:1}">股票信息</a>
   url形式如：/product?id=1&name=2
   获取参数格式：ActivatedRoute.snapshot.queryParams["id"]和ActivatedRoute.queryParams["name"]

2. 在路由路径中传递数据 =>
   routes中配置：{path:'/product/:id'}
   html 形式如：<a [routerLink]="['/stocks','1']">股票信息</a>
   url形式如：/product/1
   获取参数格式：ActivatedRoute.snapshot.params["id"]

3. 在路由配置中传递数据 =>
   routes中配置：{path:'stocks',component:StocksComponent,data:[{ispro:true}]}
   获取参数格式：ActivatedRoute.data[0]["ispro"]

一、demo展示

html:

 <a [routerLink]="['/stocks']" [queryParams]="{id:1}">在查询参数中传递，增加queryParams属性</a>

 <a [routerLink]="['/stocks','1']" >在路由路径中传递，根据配置的path值改变</a>

 <a [routerLink]="['/stocks']" >在路由配置中传递，无变化</a>

routes配置：

// 第一种，查询参数,无改变
{path:'stocks',component:StocksComponent}
// 第二种，路由参数，改变path
{path:'stocks/:id',component:StocksComponent}
// 第三种，路由配置,增加data属性
{path:'stocks',component:StocksComponent,data:[{ispro:true}]}

控制器逻辑 ts:

 export class StocksComponent implements OnInit {

  private stockId:boolean;
  //注入ActivatedRoute服务
  constructor(private routerInfo:ActivatedRoute) { }

  ngOnInit() {
    //查询参数中传递获取值
    this.stockId = this.routerInfo.snapshot.queryParams["id"];
   //路由路径参数中传递获取值
    this.stockId = this.routerInfo.snapshot.params["id"];
  //路由配置中传递获取值
    this.stockId = this.routerInfo.snapshot.data[0]["ispro"];
  }
}

二、snapshot和subscribe的区别

使用snapshot

this.stockId = this.routerInfo.snapshot.params["id"];

使用subscribe

this.routerInfo.params.subscribe((params:Params)=>this.stockId = params["id"] );

//每当params:Params值发生变化时，(params:Params)=>this.stockId = params["id"]都会被调用一次

当组件从自身路由到自身时，选择用subscribe方式，否则使用snapshot方式节约资源。

嵌套路由

在父级路由的组件里，访问子路由的routerLink

• 子路由可以无限极嵌套
• 路由信息和组件是分离的，路由信息在模块上配置，与组件并不相粘合

1.在路由配置中增加children属性，父路由是stocks，子路由有两个

    {path:'stocks/:id',component:StocksComponent,children:[
        {path:'',component:BuyerListComponent},
        {path:'saller/:id',component:SallerListComponent}
        ]
    }

2.子组件中写明routerLink和router-outlet

<div>
  <span>下面是嵌套路由信息</span>
  <a [routerLink]="['./']">（默认空路径时）展示买家信息</a>
  <a [routerLink]="['./saller']">展示卖家信息</a>
  <router-outlet></router-outlet>   
</div>

Tips:
子路由[routerLink]的值为 ./path，表示在当前主路由下找名称为path的子路由
不管嵌套多少级，子路由的[routerLink]的值写法都为 ./path

不用滞留采花保存，只管往前走去，一路上百花自会盛开。 ——泰戈尔