根据Angular 2中导航栏的事件替换模板答案

【问题标题】：Replacing templates according to events from Navbar in Angular 2根据Angular 2中导航栏的事件替换模板
【发布时间】：2016-12-29 05:23:13
【问题描述】：

我在顶部有这个导航栏，就像在大多数其他 UI 中一样。在这里，我想做的是根据导航栏中单击的选项卡替换以下 div 的内容。我并没有完全改变这里的路线。我仍然在同一条路线上，但我希望更改模板。

我搜索了它，但找不到令人满意的方法。由于我是整个 Angular 平台的新手，因此我对如何完成这一点真的不太了解。任何帮助或想法都会很棒。

我正在尝试做这样的事情：

<component-a></component-a> //this is a component selector

我想在组件选择器中显示多个其他组件的模板，有点像：

<component-a>
    <component-b></component-b>
</component-a> //either this

<component-a>
        <component-c></component-c>
</component-a> //or this

甚至两者的结合。

【问题讨论】：

您可以使用*ngIf 有条件地从 DOM 中添加/删除元素。您到底想做什么？你能分享一个代码示例吗？
您只想更改 html 内容还是整个组件？
我稍微改变了这个问题。也许这会给你一些想法。

标签： angular navbar

【解决方案1】：

在这种情况下，您必须使用 hidden 属性来显示/隐藏子组件/div，如下所示。您也可以使用 *ngIf 条件。

但是隐藏更可取，因为它不会呈现隐藏的组件构造函数和其他初始调用

//change your logic in hidden properties, you can also put same logic for other component too.
<component-a >
   <component-b [hidden]="1==1"></component-b>
   <component-c [hidden]="1==2"></component-c>
</component-a>

【讨论】：

这个显然比使用ElementRef和替换主组件选择器的全部内容要好。但是，我想知道这是否是唯一的方法。我的意思是如果有其他选择，我可能可以比较和分析。但这似乎也可以解决问题。谢谢！
你关心的只是渲染主组件的内部html，所以上面的方法更合适。如果您需要渲染整个新组件，则需要动态加载组件。