如何在运行时动态更改组件模板？ Angular 4

Question

我有一个菜单栏和操作面板。操作面板只是简单的div，其中我想要显示不同的组件。

例如： 用户单击按钮A - >在操作面板中显示组件A; 用户单击按钮B - >在操作面板中显示组件B;

这样做的最好方法是什么？

我想在我的模板中使用ngswtich，例如（伪代码！）。

<div id="action-panel"> 
    <div [ngSwitch]="componentType">   
     <div *ngSwitchCase="userComponent"> 
      <user-component></user-component> 
     </div> 
    </div> 
</div> 

Answer 1

看看路由并使用它的子路由。 在里面放置一个新的<router-outlet></router-outlet>，或者替代您的操作面板并执行子状态组件。

这是一个非常良好的阅读和可能开导你： http://blog.angular-university.io/angular2-router/

的Angular 2 - Submodule routing and nested <router-outlet>