Angular通过点击绑定方法实现路由跳转

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详情页。

猜你喜欢

转载自blog.csdn.net/qq_43579525/article/details/84207299
今日推荐