辅助路由
上篇文章中我们介绍了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>