router 传值

get 传值

路由配置
{
    path: 'new',
    component: NewContentComponent
}

[routerLink]  路由
[queryParams] 参数
<ol>
  <li
    *ngFor="let item of queryList; index as i"
    [routerLink]="['/new']"
    [queryParams]="{ id: item.id }"  >
    {{ item.title }}
  </li>
</ol>

导入 ActivatedRoute 
import { ActivatedRoute } from '@angular/router';


声明
constructor(public route: ActivatedRoute) {}

应用
this.route.queryParams.subscribe(data => {
    this.page = data.id;
});

get 传值 js 跳转

引入
import { Router, NavigationExtras } from '@angular/router';

声明
constructor(public route: Router) {}

应用
goDetail(id) {
    // NavigationExtras 传参类型，标准写法；也可以不带。
    const params: NavigationExtras = {
      queryParams: {
        id
      }
    };
    this.route.navigate(['/new'], params);
}

动态路由传参

路由配置 app.routing.module.ts 
{
    path: 'new:/id', （错误配置）
    component: NewContentComponent
}


具体模块使用 html
<ol>
  <li
    *ngFor="let item of queryList; index as i"
    [routerLink]="['/new/', item.id]">
    {{ item.title }}
  </li>
</ol>

报错

 解决

路由配置问题
{
    path: 'new/:id',
    component: NewContentComponent
}

参数获取

引入
import { ActivatedRoute } from '@angular/router';

声明
constructor(public route: ActivatedRoute) {}

应用
this.route.params.subscribe(data => {
   console.log(data);
   this.page = data.id;
});

动态路由的 js 跳转

引入 Router 
import { Router } from '@angular/router';

声明
constructor(public route: Router) {}

应用   id 可以方法传参也可以固定写
goDetail(id?) {
   this.route.navigate(['/new/', id]);
}