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

<p>
  产品id:{{productId}}
</p>

<a [routerLink]="['./desc']">商品描述</a>
<a [routerLink]="['./seller',1001]">销售员</a>
<router-outlet></router-outlet>

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

这样子路由就配置好了

二、辅助路由

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

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

//主路由
<router-outlet></router-outlet>
//辅助路由 
<router-outlet name="outlet2"></router-outlet>

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

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

在路由发起的页面上

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

2、辅助路由的开发步骤

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

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

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

ng g component chat

2、

修改app.component.html 模板文件

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <a [routerLink]="['/home']" > 主页 </a>
  <!--<a [routerLink]="['/product']" [queryParams]="{id:1}"> 产品1</a>-->
  <!--<a [routerLink]="['/product']" [queryParams]="{id:3}"> 产品3</a>-->
  <!--<a [routerLink]="['/product_data']" > 产品4</a>-->
  <input type="button" value="产品" (click)="toProductDetails(2)" >
</div>
<router-outlet></router-outlet>
<hr/>
<!--添加一个带有name的router-outlet  -->
<router-outlet name="aux"></router-outlet>

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

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

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

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <a [routerLink]="['/home']" > 主页 </a>
  <!--<a [routerLink]="['/product']" [queryParams]="{id:1}"> 产品1</a>-->
  <!--<a [routerLink]="['/product']" [queryParams]="{id:3}"> 产品3</a>-->
  <!--<a [routerLink]="['/product_data']" > 产品4</a>-->
  <input type="button" value="产品" (click)="toProductDetails(2)" >
</div>
<router-outlet></router-outlet>
<hr/>

<!--添加一个带有name的router-outlet  -->
<div style="text-align:center">
  <a [routerLink]="[{outlets:{aux: 'chat'}}]" > 开始聊天 </a>
  <a [routerLink]="[{outlets:{aux: null}}]" > 结束聊天 </a>
</div>
<!--添加一个带有name的router-outlet  -->
<router-outlet name="aux"></router-outlet>

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

需要注意的是这里无论辅助路由是怎么操作和请求，都不会影响主插座的组件显示。如果想让辅助路由显示的时候 主插座显示固定的路由就添加上配置
<a [routerLink]="[{outlets:{primary: 'home', aux: 'chat'}}]" > 开始聊天 </a>
这样在显示chat组件的同时 主路由会跳转到home页面