javascript - Angular 传递标签名称

Question

<div class="content">
  <md-tab-group>
    <md-tab label="label1" (click)="passSourceOfDocuments()">
      <details *ngFor="let package of documentPackages">
        <summary>{{package.documentPackageGuid}}</summary>
        <ul>
          <details *ngFor="let doc of package.Documents">
            <summary>{{doc.documentGuid}}</summary>
              ..........
          </details>
        </ul>
      </details>
    </md-tab>
    <md-tab label="label2" (click)="passSourceOfDocuments()">
      <details *ngFor="let doc of emaildocuments">
             ......................
      </details>
    </md-tab>
  </md-tab-group>
</div>

我会在函数“passSourceOfDocuments()”中传递标签名称，这可能吗？我可以将此标签与 .ts 文件中的属性绑定(bind)吗？

Answer 1

如果您可以将“模板引用变量”添加到您的每个<md-tab>元素，然后您可以在这样的函数中引用它们，

<md-tab #tab1 label="label1" (click)="passSourceOfDocuments(tab1.textLabel)">
<md-tab #tab2 label="label2" (click)="passSourceOfDocuments(tab2.textLabel)">

或者，如果您在组件文件中声明了一个标签数组作为属性，那么您可以通过索引或一些类似的方式添加它们，

component

labelsArr = ['label1', 'label2', 'label3'];

template

<md-tab [label]="labelsArr[0]" (click)="passSourceOfDocuments(labelsArr[0])">
<md-tab [label]="labelsArr[1]" (click)="passSourceOfDocuments(labelsArr[1])">