5、angular学习第四天（子路由、辅助路由）

一、子路由

创建两个子模块
我们进入到product这个组件的目录下
新建两个组件

ng g component productDesc
ng g component sellerInfo

1、子路由的配置

{path: 'product/:id', component: ProductComponent, children: [
      {path: '', redirectTo: 'desc', pathMatch: 'full'},
      {path: 'desc', component: ProductDescComponent},
      {path: 'seller/:id', component: SellerInfoComponent}
  ]},

子路由的配置与跟路由的配置一样。写到跟路由的children标签里面即可

2、修改product的html

  产品id:{{productId}}


商品描述
销售员

这里的./表示是当前路径

这样子路由就配置好了

二、辅助路由

1、辅助路由的配置和使用

如果路由目标 html页面上游两个路由插座

//主路由

//辅助路由 

在模块的路由配置中配置如下

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

在路由发起的页面上

Xxx
Yyy

2、辅助路由的开发步骤

1、html模板中 定义一个 带有name的router-outlet
2、单独开发一个组件。显示在新的router-outlet上
3、通过路由的参数控制是否显示这个组件。

3、案例 在原有的app 模块中添加一个辅助路由。显示固定的组件。

1、创建一个新的模块在app目录下

ng g component chat

2、

修改app.component.html 模板文件

   主页 
  
  
  
  

3、修改路由配置 添加辅助路由的配置

{path: 'chat', component: ChatComponent, outlet: 'aux'}

意思就是 在插座aux上显示模块ChatComponent。路由是chat。
浏览器会在请求url最后添加上(aux:chat) 意思就是辅助路由aux的路由是chat的组件
4、通过请求参数来控制chat组件在aux插座上的显隐
修改app.component.html 模板文件

   主页 
  
  
  
  






   开始聊天 
   结束聊天 

这里的 [routerLink]="[{outlets:{aux: 'chat'}}]"意思是 在当前的请求url地址之后添加上（aux:chat） 用于显示这个组件
"[{outlets:{aux: null}}]" 移除组件 就是url最后的（aux:chat）会去掉。从而chat组件不会显示出来。

需要注意的是这里无论辅助路由是怎么操作和请求，都不会影响主插座的组件显示。如果想让辅助路由显示的时候 主插座显示固定的路由就添加上配置
开始聊天
这样在显示chat组件的同时 主路由会跳转到home页面