根据Angular 2中的Navbar中的事件替换模板

我有这个导航栏在顶部，就像大多数其他用户界面一样。在这里，我想要做的是根据在导航栏中点击的标签替换以下div的内容。我并不完全改变这里的路线。我仍然处于相同的路线，但我希望更改模板。根据Angular 2中的Navbar中的事件替换模板

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

我试图做这样的事情：

<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

或即使是两者的结合。

来源

2016-12-29 Pragun

您可以使用[* ngIf]（https://angular.io/docs/ts/latest/api /common/index/NgIf-directive.html）有条件地添加/删除DOM中的元素。你究竟想要做什么？你能分享一个代码示例吗？ – adriancarriger

你想改变html内容还是整个组件？ –

我已经改变了一些问题。也许这会给你一些想法。 – Pragun

您必须使用隐藏属性在这种情况下显示/隐藏子组件/ 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>

来源

2016-12-29 05:34:48

这个明显优于使用ElementRef并替换主要组件选择器的全部内容。不过，我想知道这是否是唯一的方法。我的意思是如果有其他的选择，我可以比较和分析。但是这似乎也有诀窍。谢谢！ – Pragun

你关心的只是渲染主要组件的内部html，所以通过以上方法比较合适。如果您需要渲染整个新组件，那么动态组件加载将需要。 –

根据Angular 2中的Navbar中的事件替换模板

回答

相关问题