2017-04-19 91 views
0

路由組件我在我的app.module.ts以下2條路線:如何檢測角

const appRoutes: Routes = [ 
     {path: 'property/:id', component: PropertyDetailComponent}, 
     { 
     path: 'properties', 
     component: ListingViewComponent, 
     data: { title: 'Properties List' } 
     }, 
     { path: '', 
     redirectTo: '/properties', 
     pathMatch: 'full' 
     } 
    ]; 

以我app.component.html我有以下組分和出口:

<side-nav></side-nav> 

<contact-agent></contact-agent> 

<router-outlet></router-outlet> 

我想爲ListingView和PropertyDetail的contact-agent顯示side-nav。

如何有條件地顯示這些?我在路線中使用數據/標題屬性嗎?

喜歡的東西:

<div *ngIf="title === 'Properties List'"> 
<contact-agent></contact-agent> 
</div> 

回答

2

你可能要考慮定義側導航輔助(也稱爲輔助),路線和聯繫代理。然後,您可以路由到該輔助渠道中的適當內容。

你可以在這裏找到更多關於二次路線:https://angular.io/docs/ts/latest/guide/router.html#!#secondary-routes

但基本上,HTML代碼將是這樣的:

<router-outlet name=secondaryInfo></router-outlet> 
<router-outlet></router-outlet> 
+0

感謝。組件的外觀如何? – Atma

+0

你問關於激活路由的代碼嗎?我在這裏有一個代碼示例:https://github.com/DeborahK/Angular-Routing this.router.navigate([{outlets:{popup:['messages']}}]);其中popup是輔助插座的名稱,消息是路由。 – DeborahK