1. router
app-routing.moudle.ts中配置 routes
我要评论1 const routes: routes = [
2 {path: '', component: homecomponent},
3 {path: 'product', component: productcomponent}
4 ];
注意：
1. path中，不能用 / 开头。
2. routes中放的是路有对象，路由对象可以有多个，每一个路由对象至少包含两个属性，
一个属性为path 即路由的路径，一个属性为路由下级的组件。
2. routeroutlet占位符
routeroutlet占位符存放在模块的组件模板中，声明路由配置中配置的组件模板将要放在什么位置
1 <router-outlet></router-outlet>
3. routerlink 链接
一般在a标签中作为一个属性用，起到点击后链接页面的左右
1 <a [routerlink]="['/']">主页</a> 2 <a [routerlink]="['/product']">商品详情</a>
注意：
1. 此时里面的路径必须使用带 / 的，表示使用根路由。
2. 使用routerlink时注意，参数是一个数组，数组中可以带有其他信息
3. routes + routeroutlet + routerlink ：可以组成一个跳转回路，完成所需的跳转。
4. router 控制器
在主模板中：添加按钮和点击方式：
1 <input type="button" value="商品详情input" (click)="toproductdetails()">
在控制器中，编写方法，方法中存放路由地址
1 export class appcomponent {
2 title = 'router';
3 constructor(private router: router) {
4 }
5 toproductdetails() {
6 this.router.navigate(['/product']);
7 }
8 }
其中：
构造器中可以获取到路由
点击事件中使用路由的navigate()方法可以传入地址参数。
routes + routeroutlet + router(控制器中) ：可以组成一个跳转
5. activatedroute
activatedroute 获取激活路由对象中携带的参数
1、构造器获取activatedroute激活路由对象
1 constructor(private routeinfo: activatedroute) { }
2、初始化数据时获取参数中的数据
1 ngoninit() {
2 this.productid = this.routeinfo.snapshot.queryparams['id'];//从参数中获取id
3 this.productid = this.routeinfo.snapshot.params['id']; //从url中获取id
4 }
如对本文有疑问， 点击进行留言回复！！
网友评论