Question

我的组件定义如下：

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

@Input() selectedStepId: number=0;

selectedIndex: number = 0;
}

和模板定义如下：

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

我想访问我的组件中的tab.Id。所以我定义了＃34; selectedStepId＆＃34;在组件上输入属性并将其绑定到tab.Id.然而它抛出异常。我知道我们可以将属性从数据源绑定到模板但是如何反转，即将属性从模板绑定到组件？换句话说，如何从组件中访问模板中定义的变量？

Answer 1

我认为您可以专注于获取Tab组件而不是直接获取'selectedStepId'属性。装饰者'ViewChildren'可以帮助你。

html文件：

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

ts文件：

class WizardTabs {

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

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

}

Angular 2属性绑定

1 个答案: