Question

我有一个带有材料选项卡组的组件。我正在尝试访问3选项卡上的子组件，但@viewChild未定义。当它在第一个标签中时有效。

组件html中的

片段：

mv

组件ts中的

ViewChild声明

<mat-tab-group>
  <mat-tab label="Person Details">
    <app-person-form [(form)]="personForm"></app-person-form>
  </mat-tab>
  <mat-tab label="Addresses">
    <app-address-list [addresses]="person.addresses" [isForDelivery]="false" [selectedAddressIndex]="null"
      (addAddressClick)="addAddress()" (editAddressClick)="editAddress($event)"></app-address-list>
  </mat-tab>
  <mat-tab label="Accounts">
    <app-person-account-member-list [roles]="person.accountRoles" (addAccountClicked)="addAccountClicked($event)"></app-person-account-member-list>
  </mat-tab>
  <mat-tab label="Organisations">
    <app-person-organisation-member-list [roles]="person.organisationRoles"></app-person-organisation-member-list>
  </mat-tab>
  <mat-tab label="Subscriptions">
    <app-person-delivery-list [deliveries]="person.deliveries" [addresses]="addresses"></app-person-delivery-list>
  </mat-tab>
  <mat-tab *ngIf="isDebug" label="DEBUG">
    <pre>
      {{value | json}}
    </pre>
  </mat-tab>
</mat-tab-group>

PersonAccountMemberListComponent发出一个事件，父组件（带有选项卡组）对此做出反应，根据用户的选择，我需要刷新PersonAccountMemberListComponent组件。我知道它已完全呈现，因为PersonAccountMemberListComponent触发了循环本身。一切正常，除了刷新子级，因为@ViewChild引用未定义

Answer 1

如果创建任何堆栈闪电会更好，但是我建议采用以下对您有帮助的方法。您可以在MatTabGroup中获得所有选项卡。首先为标签组创建视图子项，如下所示

<mat-tab-group #tab>

然后在TS文件中

@ViewChild("tab") tab:MatTabGroup ;

现在您可以使用this.tab._tabs._results

访问任何标签数据

当@ViewChild不是第一个标签时，在mat-tab中未定义

1 个答案: