Question

假设我有主页，关于和高级搜索页面。在我的AppComponent html中，我有这个：

<view-header></view-header>
<view-search></view-search>
<router-outlet></router-outlet>
<view-footer></view-footer>

非常简单。首先，我加载我的标题的html，然后加载我的默认搜索的html然后打开和继续。

正如我之前所说，我有搜索页面。显然，我不想显示我的指令view-search，因为当你进入高级搜索页面时它很无用。

所以我的问题是，当我路由到高级搜索页面时，如何告诉Angular2禁用view-search指令？

编辑1

换句话说，我想做那样的事情：

<view-header></view-header>

<!-- If (not in route "/search") -->
    <view-search></view-search>
<!-- Endif -->

<router-outlet></router-outlet>
<view-footer></view-footer>

Answer 1

您只需在模板中使用ngIf（或绑定到[hidden]）：

<view-header></view-header>
<view-search *ngIf="showViewSearch"></view-search>
<router-outlet></router-outlet>
<view-footer></view-footer>
<router-outlet></router-outlet>

您要将showViewSearch定义为

constructor(private activatedRoute: ActivatedRoute) {
  this.showViewSearch = activatedRoute.component !== Search
}

仅当当前路由不是搜索时才会呈现viewSearch组件。

Angular 2 - 根据页面切换指令组件

1 个答案: