Angular 2 Eigenschaft Bindung

Question

ich meine Komponente wie folgt definiert:

export class WizardTabs { 
@Input() Tabs: any; 

@Input() selectedStepId: number=0; 

selectedIndex: number = 0; 
} 

und Vorlage wie folgt definiert:

<md-tabs md-border-bottom md-autoselect [selected]="selectedIndex"> 
<template md-tab *ngFor="let tab of Tabs" [label]="tab.Name" [selectedStepId]="tab.Id"> 
    <md-content class="md-padding"> 
    <wizard-tab-content [TabContent]="tab.StepComponent"></wizard-tab-content> 
    </md-content>  
</template> 
</md-tabs> 

I tab.Id in meiner Komponente zugreifen möchten. Also habe ich die Eingabeeigenschaft "selectedStepId" für die Komponente definiert und an tab.Id gebunden. Jedoch wirft seine Ausnahme. Ich weiß, dass wir Eigenschaften von Datenquelle an Vorlage binden können, aber wie man es umgekehrt macht, d. H. Eigenschaft von Vorlage an Komponente binden? Mit anderen Worten: Wie kann ich auf die in der Vorlage definierte Variable zugreifen?

Answer 1

Ich denke, Sie können sich darauf konzentrieren, die Tab-Komponente zu bekommen, anstatt die Eigenschaft 'selectedStepId' direkt zu bekommen. Der Dekorateur 'ViewChildren' kann Ihnen dabei helfen.

html-Datei:

<md-tabs> 
    <md-tab *ngFor="let tab of Tabs" [selectedStepId]="tab.Id"></md-tab> 
</md-tabs> 

ts-Datei:

class WizardTabs { 

    @ViewChildren(MDTabComp) tabs:QueryList<MDTabComp>; 

    ngAfterViewInit() { 
    this.tabs.toArray().forEach((tab)=>console.log(tab.selectedStepId)); 
    } 

}