Angular4.0_辅助路由

辅助路由

上篇文章中我们介绍了Angular的父子关系的子路由，这里我们介绍兄弟关系的辅助路由。

1.除了在控件中声明router-outlet插座外，还需要声明一个带有name属性的插座。

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

2.在路由配置里面，需要配置名字为aux的组件上可以配置的组件

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

3.

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

辅助路由案例整体思路

在app组件的模板上再定义一个插座来显示聊天面板
单独开发一个聊天室组件，只显示在新定义的插座上
通过路由参数来控制新插座是否显示聊天面板

代码示例：新建一个聊天组件

ng g component chat

在app.component.html中添加名为aux的辅助路由

<a [routerLink]="['/home']">主页</a>
<!--<a [routerLink]="['/product']" [queryParams]="{id:1}">商品详情</a>-->
<a [routerLink]="['/product',2]">商品详情</a>
<input type="button" value="商品详情" (click)="toProductDetails()">
<router-outlet></router-outlet>
<router-outlet name="aux"></router-outlet>

改造整体的代码，使聊天组件局左，占据整个页面30%
chat.component.html

<textarea placeholder="请输入聊天内容" class="chat"></textarea>

chat.component.css

.chat{
    background: greenyellow;
    height: 100px;
    width: 30%;
    float:left;
    box-sizing: border-box;
}

product.component.html

<div class="product">
    <p>
        这里是商品信息组件
    </p>

    <p>
        商品ID是：{{productId}}
    </p>

    <a [routerLink]="['./']">商品描述</a>
    <a [routerLink]="['./seller',99]">销售员信息</a>

    <router-outlet></router-outlet>
</div>

product.component.css

.product{
    background: cadetblue;
    height: 100px;
    width: 70%;
    float:left;
    box-sizing: border-box;
}

home.component.html

<div class="home">
  <p>
    这里是主页组件
  </p>
</div>

home.component.css

.home{
    background: cadetblue;
    height: 100px;
    width: 70%;
    float:left;
    box-sizing: border-box;
}

修改完成，然后在app-routing.module.ts中，添加插件

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {HomeComponent} from "./home/home.component";
import {ProductComponent} from "./product/product.component";
import {Code404Component} from "./code404/code404.component";
import {ProductDescComponent} from "./product-desc/product-desc.component";
import {SellerInfoComponent} from "./seller-info/seller-info.component";
import {ChatComponent} from "./chat/chat.component";

const routes: Routes = [
    {path: '', redirectTo:'/home',pathMatch:'full'},//路由重定向
    {path: 'chat', component: ChatComponent,outlet:'aux'},
    {path: 'home', component: HomeComponent},
    {path: 'product/:id', component: ProductComponent,children:[
        {path: '', component: ProductDescComponent},
        {path: 'seller/:id', component: SellerInfoComponent},
    ]},
    {path: '**', component: Code404Component},
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {
}

outlet:'aux'表示在定义辅助路由aux的页面才显示，没有定义的则不显示

app.component.html

<a [routerLink]="['/home']">主页</a>
<!--<a [routerLink]="['/product']" [queryParams]="{id:1}">商品详情</a>-->
<a [routerLink]="['/product',2]">商品详情</a>
<input type="button" value="商品详情" (click)="toProductDetails()">

<a [routerLink]="[{outlets:{aux:'chat'}}]" [queryParams]="{id:1}">开始聊天</a>
<a [routerLink]="[{outlets:{aux: null}}]">结束聊天</a>
<router-outlet></router-outlet>
<router-outlet name="aux"></router-outlet>

还有一个属性primary，如果设置primary属性，那么不管在哪个页面，当点击开始聊天的时候，都会跳回到home页面中

app.component.html

<a [routerLink]="['/home']">主页</a>
<!--<a [routerLink]="['/product']" [queryParams]="{id:1}">商品详情</a>-->
<a [routerLink]="['/product',2]">商品详情</a>
<input type="button" value="商品详情" (click)="toProductDetails()">

<a [routerLink]="[{outlets:{primary:'home', aux:'chat'}}]" [queryParams]="{id:1}">开始聊天</a>
<a [routerLink]="[{outlets:{aux: null}}]">结束聊天</a>

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