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> 
` 

私の目標は、それぞれの「LI」に「私のヒーロー・ディテール」の要素を持っているし、次に名をクリックすると、その特定の英雄の詳細とそれを表示することです。

Answer 1

あなたは<my-hero-detail>複数回使用することができます：あなたはそれがあるべきかを示す各ヒーローのための真/偽の値を含むようにselectedHeroesを更新する必要があり、詳細を表示/非表示を切り替えできるようにしたい場合は、

<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: Object = {}; 

参照のデモ：<li>は<my-hero-detail>要素を含むことを期待していないので、スタイルがマングルされているhttp://plnkr.co/edit/nG0RkwR2kmr6AXzln6mU?p=info

注意。