Einfügen mehrerer Kopien der gleichen Komponente in der Angular-Anwendung

Question

Ich lerne Angular mit der "Tour of Heroes" App. In der multiple components part können wir Heldendetails anzeigen, indem wir auf den Heldennamen klicken. Was wäre das Entwurfsmuster (oder die Implementierung), das mehrere Instanzen der Komponente "Heldendetails" enthält, so dass es dynamisch unter jedem Helden angezeigt wird, wenn darauf geklickt wird?

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

Mein Ziel ist es „my-Held-Detail“ Element in jedem „li“ zu haben und es dann mit, dass bestimmte Held Details anzeigen auf den Namen auf klicken.

Answer 1

Sie können <my-hero-detail> mehrfach verwenden:

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

Dann, wenn Sie sich verstecken können, wollen/zeigen das Detail, das Sie selectedHeroes aktualisieren müssen Wahr/Falsch-Werte für jeden Helden enthalten angibt, ob es sein sollte sichtbar oder nicht.

selectedHeroes: Object = {}; 

Siehe Demo: http://plnkr.co/edit/nG0RkwR2kmr6AXzln6mU?p=info

Hinweis, die Stile verstümmelt sind, weil <li> nicht <my-hero-detail> Elemente enthält erwarten.