Angular路由——辅助路由

时间：2021-12-17 06:00:53

一、辅助路由语法

同时控制多个插座内容。

Angular路由——辅助路由

第一步：

模版上除了主插座，还需要声明一个带name属性的插座

第二步：

路由配置中配置name为aux的插座上可以显示哪些组件，比如显示xxx和yyy组件。

第三步：

在导航时候，路由到某个地址时，辅助的插座上显示哪个组件

二、实例

聊天功能可以在任何页面（商品列表页面，商品详情页面，主页面等）使用。

第一步：在app组件的模版上在定义一个插座来显示聊天面板。

<a [routerLink]="['/home']">主页</a>

<a [routerLink]="['/product',2]">商品详情</a>

<input type="button" value="商品详情" (click)="toProductDetails()">

<router-outlet></router-outlet>

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

第二步：单独开发一个聊天室组件，只显示在新定义的插座上。

新建聊天组件并修改模版

ng g c chat
<textarea

placeholder="请输入聊天内容" n

class="chat"

ame="" id="" cols="30" rows="10"></textarea>
.chat{

background: green;

height: 100px;

width: 30%;

float: left;

box-sizing: border-box;

}

修改home组件和product组件模版，包一层div并设置样式

.product{

    background: yellow;

    height: 100px;

    width: 70%;

    float: left;

    box-sizing: border-box;

}

.home{

    background: red;

    height: 100px;

    width: 70%;

    float: left;

    box-sizing: border-box;

}

配置路由决定聊天组件是否显示

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 }

];

第三步：通过路由参数控制新插座是否显示聊天面板

增加开始聊天和结束聊天按钮

<!--The content below is only a placeholder and can be replaced.-->

<a [routerLink]="['/home']">主页</a>

<a [routerLink]="['/product',2]">商品详情</a>

<input type="button" value="商品详情" (click)="toProductDetails()">

<a [routerLink]="[{outlets: {aux: 'chat'}}]">开始聊天</a>

<a [routerLink]="[{outlets: {aux: null}}]">结束聊天</a>

<router-outlet></router-outlet>

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

效果：

点开始聊天，URL后面多了一个(aux:chat) :辅助路由aux插座路由路径是chat，chat路径对应显示ChatComponent。

Angular路由——辅助路由

主路由可随意切换，不影响辅助路由

http://localhost:4200/home(aux:chat)

http://localhost:4200/product/2(aux:chat)

扩展：如果想展示chat组件时候，主路由要跳到home组件上。

用priamry指定主路由路径，因为主路由没有名字。

<a [routerLink]="[{outlets: {primary: 'home' , aux: 'chat'}}]">开始聊天</a>

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/9006227.html 有问题欢迎与我讨论，共同进步。

相关文章