在Angular應用程序中插入相同組件的多個副本

Question

我正在使用「Tour of Heroes」應用程序學習Angular。在multiple components part中，我們可以通過點擊英雄名字來顯示英雄詳情。什麼是設計模式（或實現）有多個「英雄詳情」組件的實例，所以當它被點擊時，它會在每個英雄下動態顯示？

template: ` 
    <h1>{{title}}</h1> 
    <h2>My Heroes</h2> 
    <ul class="heroes"> 
    <li *ngFor="let hero of heroes" 
     [class.selected]="hero === selectedHero" 
     (click)="onSelect(hero)"> 
     <span class="badge">{{hero.id}}</span> {{hero.name}} 
    </li> 
    </ul> 
    <my-hero-detail [hero]="selectedHero"></my-hero-detail> 
` 

我的目標是在每個「禮」「我的英雄細節」元素，然後在點擊名稱與具體細節英雄顯示它。

Answer 1

您可以使用<my-hero-detail>多次：

<ul class="heroes"> 
    <li *ngFor="let hero of heroes; let i=index" 
    [class.selected]="hero === selectedHero" 
    (click)="selectedHeroes[i] = !selectedHeroes[i]"> 
    <span class="badge">{{hero.id}}</span> {{hero.name}} 
    <my-hero-detail [hero]="hero" [style.display]="selectedHeroes[i] ? 'block' : 'none'"></my-hero-detail> 
    </li> 
</ul> 

然後，如果你希望能夠隱藏/顯示您必須更新selectedHeroes以包含每個英雄指示是否應該真/假值的細節可見與否。

selectedHeroes: Object = {}; 

觀看演示：http://plnkr.co/edit/nG0RkwR2kmr6AXzln6mU?p=info

注意風格是錯位的，因爲<li>預計不會包含<my-hero-detail>元素。