router 传值

get 传值

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

[routerLink]  路由
[queryParams] 参数
{{ item.title }}

导入 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
{{ item.title }}

报错

 解决

路由配置问题
{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]);
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！