1.在ts文件引入Router(不是Routers)
import {Router} from '@angular/router';
2.在构造器里声明(ts文件里):
constructor(private router:Router){}/*声明路由*/
3.自定义定义一个方法:
goDetail () {
// 这里的router是构造器里声明的router,跳转通过navigate()
//传参:第一个是路由路径,第二个是跳转携带的参数
(注意需在路由配置里带上参数如下:
{path: 'detail/:id',component: detailComponent}
)
//要在路由配置里带上参数,这里才可以带上参数(格式须一致)
this.router.navigate(['/detail','123']);
}
4.在标签里绑定goDetail方法:
<div class="detail" (click)="goDetail()">前往详情页</div>
5.点击前往详情页时在浏览器地址栏的地址后会多了个123(…/detail/123),这样就把参数传到了detail详情页。