angular - 当它不是第一个选项卡时，@ViewChild 在 mat-tab 中未定义

Question

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

来自组件 html 的片段:

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

组件ts中的ViewChild声明

@ViewChild(PersonAccountMemberListComponent) accountRolesList: PersonAccountMemberListComponent;

PersonAccountMemberListComponent 发出一个事件，父组件(带有选项卡组)对此使用react，并且根据用户的选择，我需要刷新 PersonAccountMemberListComponent 组件。我知道它已完全呈现，因为 PersonAccountMemberListComponent 触发了循环本身。一切正常，除了刷新 child ，因为 @ViewChild 引用未定义

Answer 1

如果创建了任何 stackblitz 会更好，但我建议采用以下对您有帮助的方法。您可以获得 MatTabGroup 中的所有选项卡。首先为选项卡组创建 View 子项，如下所示

<mat-tab-group #tab>

和在TS文件中

@ViewChild("tab", { static: false }) tab:MatTabGroup ;

现在您可以使用 this.tab._tabs._results 访问任何选项卡数据