각도 2 동적 구성 요소 디스플레이

몇 가지 조언이 필요합니다. Angular2에서 대시 보드를 개발 중입니다. 내 프로젝트의 유형이 다를 수 있으며 이러한 유형과 관련된 구성 요소를 표시하려고합니다.각도 2 동적 구성 요소 디스플레이

<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

프로젝트 유형에 따라 '라우터 콘센트'에서 다른 경로를 사용하여 다른 구성 요소를로드 할 수 있습니다. –

이 구성 요소의 내용은 무엇입니까 ('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에도 view에 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

각도 2 동적 구성 요소 디스플레이

답변

관련 문제