动态组件
动态组件
提问于 2016-09-05 19:28:23
在视图中动态显示组件的正确方式是什么？
例如，我有一个具有导航和视图的组件。单击导航中的按钮不同的子组件应该会在视图中出现/消失。每个子组件都属于不同的类型。
import { Component, Input } from '@angular/core';
import { Controls } from './controls.service';
@Component({
selector: 'Controlpanel',
templateUrl: 'app/templates/controlPanel.component.html',
directives: Controls.directives()
})
export class ControlPanelComponent {
controls = Controls.objects;
activeControl:string = Controls.objects[0].name;
}--
<nav class="container-fluid">
<div class="row">
<a *ngFor="let control of controls" (click)="toggleControl(control.name, $event)" role="button" href="#" class=" text-uppercase">
{{control.name}}
</a>
</div>
</nav>
<div>
<this is where i want the sub-component to appear/>
</div>回答 1
Stack Overflow用户
发布于 2016-09-05 19:39:48
你可以添加你想要加载到窗体上的每个控件，然后给每个控件添加一个*ngIf，但我不会这么做。
添加要加载指令的位置。并创建一个childRoute来显示您想要显示的组件(指令)：
<nav class="container-fluid">
<div class="row">
<a *ngFor="let control of controls" (click)="toggleControl(control.name, $event)" role="button" href="#" class=" text-uppercase">
{{control.name}}
</a>
</div>
</nav>
<div>
<!-- this is where you show your sub-component t by routing -->
<router-outlet></router-outlet>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39329624
复制相关文章
相似问题
腾讯云开发者
