Angular路由——輔助路由

starof發表於2018-05-09
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。

主路由可隨意切換，不影響輔助路由

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 有問題歡迎與我討論，共同進步。

相關文章