一、子路由
创建两个子模块
我们进入到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页面
