1.路由配置
- 创建两个组件
- 在app-routing.modult.ts中配一个空路由
const routes: Routes = [
{path: '', component: HomeComponent}
];
在做路由配置时path属性不要用’/'开头，因为angular本身会根据path的值做相应的解析生成url。
- 在app.component.html中自动加入<router-outlet></router-outlet>
- link访问路由写法：<a [routerLink]="['/']">主页</a>
- 通过调用方法访问路由的写法
<input type="button" value="我是详情" (click)="toStockDetail()">
方法在app.component.ts中声明：
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
constructor(private router: Router){
}
toStockDetail(){
this.router.navigate(['/stock']);
}
}
- 当用户访问的路由不存在时，页面出错，可以通过配置通配符解决问题。
创建一个新的组件，在路由配置中加{path: '**', component: Code404Component}
通配符写在整个路由配置的最后面。
2.数据传递
１．在查询参数中传递数据
- 路由路径？参数名=参数值
- /product?id=1&name=2 => ActivatedRoute.queryParams[id]
2.在路由路径中传递数据
- 指定路由路径加参数名=>在实际路径中携带的参数=>调用
- {path:/product/:id}=>/product/1=>ActivatedRoute.params[id]
3.在路由配置中传递数据
- 通过data参数定义静态数据，data本身为数组
- {path: /product, component: ProductComponent, data:[{isProd:true}]}=>ActivatedRoute.data[0][isProd]
4.在url中传递参数
- 修改路由配置中的path属性，使其可以携带参数。
- {path: 'stock/:id', component: ProductComponent, data:[{isPro:true}]}
- 修改路由链接，让链接在跳转时携带参数。
- <a [routerLink]= "['/stock',1]" >url获取参数</a>
3.参数快照与参数订阅
- 参数快照：传参方式与前面记录相同。当从主页跳转到详情页时，详情页组件被创建，调用ngOnInit()方法，但是，当详情页跳转到详情页时（两个传参不同），组件不会被重新创建，ngOnInit()方法在同一组件路由到自身时不会被调用。
this.id = this.routerInfo.snapshot.params["id"]
- 参数订阅：订阅方式改变参数值时，每当路由参数变换时，匿名的方法都会被调用一次。
this.routerInfo.params.subscribe((params:Params)=>this.id = params["id"])
4.重定向路由
{path: '', redirectTo: '/home',pathMatch:'full'}
pathMatch:'full'表示只有访问路径是精准的空字符串时才跳转到/home上。
{path: 'xx', redirectTo: '/home',pathMatch:'prefix'}
pathMatch:'prefix'表示路径是以“xx”开头就可跳转到/home上。
5.子路由
在原有路由的基础上加children属性。将router-outlet声明在哪个子路由就会显示在哪儿。由于声明的是子路由，在访问子路由时是不能以“/”开头的，“/”开头代表在主路由中找，子路由以“./”开头。
- 子路由可以一直嵌套
- 路由信息和组件是分离的
{path: 'stock', component: StockComponent,
children:[
{path: '', component:BuyerListComponent},
{path: 'seller/:id', component:SellerListComponent}
]
}
6.辅助路由
在每个页面都有的一些侧边导航，会用到辅助路由。
- 在组件模板上除了外，还需要声明一个带name属性的
- 在路由配置中去配置aux可以显示哪些组件。
{path: 'consult', component: ConsultComponent,outlet:"aux"}
- 导航时指定在路由到某个地址时，辅助路由上需要显示哪个组件。
<a [routerLink]="[{outlets: {aux: 'consult'}}]">开始</a><br>
说明：主路由的内容也可以控制，主路由没有设置名字，它有一个默认的关键字——primary，在aux前面加上primary:'home'，然后点击，主路由跳转到home。
