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

Posted 2023-02-22

【中文标题】如何在运行时动态更改组件模板？角 4

【英文标题】：How to dynamic change component template at runtime?. Angular 4

【发布时间】：2017-12-08 00:46:29

【问题描述】：

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

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

最好的方法是什么？

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

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

【问题讨论】：

你可以使用路由到这个，你可以浏览不同的视图。更多信息请访问angular.io/guide/router

【参考方案1】：

查看路由并为其使用子路由。 将新的<router-outlet></router-outlet> 放置在您的操作面板中或代替您的操作面板并执行子状态组件。

这是一本非常好的读物，可能会启发您： http://blog.angular-university.io/angular2-router/

Angular 2 - Submodule routing and nested <router-outlet> 可能重复