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

Question

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

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

很简单。首先我加载标题的 html，然后加载默认搜索的 html，然后继续。

正如我之前所说，我有页面搜索。显然，我不想显示我的指令 view-search，因为当您在 高级搜索 页面中时它非常无用。

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

---

编辑 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 组件只有在当前路由不是搜索时才会呈现。