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

标签 javascript angular

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

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

最好的方法是什么?

例如,我想在我的模板中使用 ngswtich(伪代码!)。

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

最佳答案

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

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

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

关于javascript - 如何在运行时动态更改组件模板? Angular 4,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44907761/

相关文章:

angular - typescript - 类型 'userId' 上不存在属性 'unknown'

javascript - 带有 Sequelize 的 Node.js 上的 SQL Server 2008

javascript - Ionic - 后退按钮关闭键盘但输入仍然聚焦

html - 隐藏选择元素的文本部分

angular - 禁用 Angular ng-select 窗口

angular - 如何将可观察值存储在变量或属性中

javascript - 简单的 Angular 2 应用程序出现 "Potentially unhandled rejection"错误

javascript - 在 React 功能组件中使用 async/await

javascript - 如何使用 JavaScript 获取 CSS 样式并更改值

javascript - 缩放后 Fabricjs Canvas 重置