Angular子路由辅 助路由（5）

1.路由重定向

• 当用户访问一个特定地址时，将其重定向到另一个指定的地址

www.aaa.com=>www.aaa.com/products
//原来用户保存的x地址，更新后原用户能根据X地址跳转到更新的y地址
www.aaa.com/x  =>www.aaa.com/y

2.子路由

• 和路由的配置是一样的，子路由顾名思义是一种嵌套模式，嵌套在路由里

//子路由语法
{path：'home',component:HomeComponent}
{path:'home',component;HomeComponent,children:[
 {
   path:'',component:XxxComponent,
 }
 {
  path:'/yyy' component:YyyComponent
 }
]}

//模板代码
<p>
 销售员ID是：{{sellerId}}
</p>

//ts代码
export class SearchComponent implements OnInit {
  private sellerId:number;
  constructor(private routeInfo;ActivatedRoute) { }

  ngOnInit() {
  this.sellerId=this.routeInfo.snapshot.params["id"];
  }
}

//在商品信息组件显示产品描述信息
<p>
这里是商品信息组件
</p>
<!--显示产品的描述信息-->
<router-outlet></router-outlet>

3.辅助路由

• 辅助路由就是对路由功能的加强扩展，它与路由的配置相同不同的是，比主路由多了一个name属性：用来指定辅助路由显示那几个组件

 <router-outlet></router-outlet>
 <router-outlet name="aux"></router-outlet>

• 在路由配置里面需要配置名字为aux的插座可以有哪些组件(在aux插座可以显示xxx和yyy组件)

 {path: 'xxx',component:XxxComponent,outlet:"aux"}
 {path: 'yyy',component:YyyComponent,outlet:"aux"}

• 在导航的时候需要指定在路由到某一个地址的时候，在你辅助的路由上，需要显示那个home组件，当点xx链接的时候，住插座会导航到home的组件。aux插座会显示xx路径对应的组件

 <a [routerLink]="['/home',{outlets:{axu: 'xxx'}}]">Xxx</a>
 <a [routerLink]="['/product',{outlets:{axu: 'yyy'}}]">Yyy</a>

• 一个组件路由的模板上只有一个插座，辅助路由可以定义多个插座，同时控制每一个插座上显示的内容

4.路由守卫

• 当用户满足某些条件后才能进入或离开路由
• 一个有多个表单组件组成的想到，例如注册流程，用户只有在当前路由的组件中填写了满足要求的信息才可以导航到下一个路由
• 当用户未执行保存操作而试图离开当前导航时提醒用户。

Canactivate:处理导航到某路由的情况
CanDeactivate:处理从当前路由离开的情况
Resolve:在路由激活之前获取路由数据

• resolve守卫：当我们想要进入一个路由，在组件内部拿到id后
• 声明一个泛型，resolve要解析出来的数据的类型，拿到传进来的id-判断
  

5.小结

//路由配置
const routeConfig:Routes=[
{path:'', component:HomeComponent},
{path:'product/:proTitle', component:ProductDetailComponent}
]

//注入路由配置
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot(routeConfig)
],