Angularjs 2: Access-Komponente einer Richtlinie

Question

das folgende Snippet Parent ‚s-Vorlage vor:

<div *ngFor= "let event of events" > 
    <event-thumbnail [theEvent] = 'event'></event-thumbnail>      
</div> 

Auch event-thumbnail Komponente Definition lautet:

export class EventThumbnailComponent{ 
    intoroduceYourself(){ 
     console.log('I am X'); 
    } 
} 

In Parent Komponentenklasse, ich will Um über alle generierten event-thumbnail Elemente zu iterieren, greifen Sie auf die Komponente unter jedem Element zu und rufen Sie die Funktion introduceYourself auf einem einzelnen davon auf.

Answer 1

Sie wollen die @ViewChildren() Dekorateur verwenden, um eine Liste aller Instanzen eines bestimmten Komponententyp in der Ansicht zu erhalten:

class ParentComponent implements AfterViewInit { 
    @ViewChildren(EventThumbnailComponent) 
    eventThumbnails: QueryList<EventThumbnailComponent>; 

    ngAfterViewInit(): void { 
     // Loop over your components and call the method on each one 
     this.eventThumbnails.forEach(component => component.introduceYourself()); 

     // You can also subscribe to changes... 
     this.eventThumbnails.changes.subscribe(r => {    
      // Do something when the QueryList changes 
     }); 
    } 
} 

Die eventThumbnails Eigenschaft wird aktualisiert werden, wenn eine Instanz dieser Komponente zur Ansicht hinzugefügt oder aus ihr entfernt wird. Beachten Sie, dass die eventThumbnails nicht auf ngAfterViewInit festgelegt ist.

Siehe hier Dokumentation für weitere Informationen: https://angular.io/docs/ts/latest/api/core/index/ViewChildren-decorator.html

Answer 2

Ihre untergeordnete Komponente sollte @Input() theEvent haben, um Zugriff auf das Ereignis zu erhalten, das Sie übergeben. Dann können Sie den folgenden Lifecycle-Haken verwenden:

ngOnInit(){ 
    introduceYourself(){ 
     console.log('I am X'); 
    } 
}