根据路径Angular2禁用/隐藏指令

时间:2016-05-03 17:01:38

标签: angular angular2-routing

我的app.component.ts文件中定义的路由如下

@View({
    templateUrl: 'assets/home.html',
    directives: [AccountManagerComponent, HeaderComponent, ROUTER_DIRECTIVES],

})
@RouteConfig([
    { path: '/home', name: 'Home', component: HomeComponent },
    { path: '/about', name: 'About', component: AboutComponent },    
    { path: '/', name: 'IdentityManager', component: IdentityManagerComponent, useAsDefault: true}    
])
home.html中的

模板如下所示。

<header id="ag-header" class="app-header" role="banner"></header>
<section id="ag-content" class="page-login">
  <router-outlet></router-outlet>
</section>

现在我想禁用/隐藏'header'元素,如果我在identitycomponent。

那么我可以根据路线查看/隐藏模板中的指令吗?

1 个答案:

答案 0 :(得分:0)

<header *ngIf="isIdentityManager" id="ag-header" class="app-header" role="banner"></header>
<section id="ag-content" class="page-login">
  <router-outlet></router-outlet>
</section>
constructor( router: Router) {
  router.subscribe(value => {
    this.isIdentityManager = router.currentInstruction.component.routeName == 'IdentityManager';
  });
}

另见In Angular 2 how do you determine the active route?