Angular2动态组件显示

我需要一些建议。我正在Angular2中开发一个仪表板。我的项目可以有不同的类型，我想显示一个组件与这些类型中的每一个。Angular2动态组件显示

这是我现在做的事：

<div *ngIf="project.types.type1"> 
    <app-type1></app-type1> 
</div> 
<div *ngIf="project.types.type2"> 
    <app-type2></app-type2> 
</div> 
<div *ngIf="project.types.type3"> 
    <app-type3></app-type3> 
</div>

但我想知道是否有可能把它写在一个更优雅的方式，可以看看这个：

<div *ngFor="let key of project.types | keys"> 
     <template name="app-{{key}}></template> 
    </div>

感谢

来源

2016-12-02 Julien Deruere

根据您的项目类型，您可能会使用不同的路由来加载'router-outlet'中的不同组件，您是否考虑过？ –

这些组件的内容是什么（'app-type1'，'app-type2' ...）？如果它只是模板，那么你可以使用'ngTemplateOutlet'或'ngForTemplate'就像这里http://stackoverflow.com/questions/39974126/how-to-pass-an-expression-to-a-component-as-an- input-in-angular2/39977298＃39977298 – yurzui

@MadhuRanjan我的项目可以有多种类型。每种类型都可以显示为一个组件，例如：如果我的项目有type1，我将包含app-type1组件，如果它也有type2，我将在视图中包含app-type1和app-type2。 –

这不是你正在寻找的循环解决方案，但它仍然略微改善优雅从你目前如何做（在我看来）

<div [ngSwitch]="project.types"> 

    <app-type1 [*ngSwitchCase]="project.types.type1"></app-type-1> 
    <app-type2 [*ngSwitchCase]="project.types.type2"></app-type-2> 
    <app-type3 [*ngSwitchCase]="project.types.type3"></app-type-3> 

</div>

来源

2016-12-02 20:13:55

Angular2动态组件显示

回答

相关问题