Angular ngIf無法訪問父屬性

Question

我正在使用Angular 5和Material 5：

<mat-tab-group>
    <mat-tab label="INFO">
        info goes here
    </mat-tab>
    <mat-tab label="CONTACTS">
        <div *ngIf="isActive">
            contacts should load here
        </div>
    </mat-tab>
</mat-tab-group>

我正在嘗試顯示聯系人，但僅在選項卡處於活動狀態時才顯示。 mat-tab有一個isActive屬性（ https://github.com/angular/material2/blob/5.2.x/src/lib/tabs/tab.ts#L83 ），但我無法訪問它，它看起來未定義。

我不明白我在做什么錯。

（目前我也不能使用較新版本的Angular）。

Answer 1

這樣工作：

<mat-tab-group>
    <mat-tab label="INFO">
        info goes here
    </mat-tab>
    <mat-tab #contactsTab label="CONTACTS">
        <div *ngIf="contactsTab.isActive">
            contacts should load here
        </div>
    </mat-tab>
</mat-tab-group>

如果沒有對元素的引用（ Docs：Components Interactions ），元素就無法訪問任何元素的屬性，除非div是模板的一部分，即使它在模板內部，也不會被視為mat-tab的一部分。

Answer 2

我認為您不需要*ngIf 。 如果檢查選項卡正文，則應該在非活動選項卡中看不到內容。

例如，從這個簡單的StackBlitz中 ，有兩個選項卡，第二個<mat-tab-body>里面什么也沒有。

然后，單擊另一個選項卡，相反的情況發生。

資源

<mat-tab-group>
  <mat-tab label="One">
    <h1>Some tab content</h1>
    <p>...One</p>
  </mat-tab>
  <mat-tab label="Two">
    <h1>Some more tab content</h1>
    <p>...Two</p>
  </mat-tab>
</mat-tab-group>

DOM檢查，選項卡1處於活動狀態

<div class="mat-tab-body-wrapper">
  <!--bindings={
    "ng-reflect-ng-for-of": "[object Object],[object Object"
    }-->

  <mat-tab-body class="mat-tab-body ng-tns-c5-0 mat-tab-body-active ng-star-inserted" role="tabpanel" ng-reflect-_content="[object Object]" ng-reflect-position="0" id="mat-tab-content-0-0" aria-labelledby="mat-tab-label-0-0" ng-reflect-origin="0">
    <div class="mat-tab-body-content ng-trigger ng-trigger-translateTab" style="transform: none;">
      <!---->
      <h1 class="ng-star-inserted" style="">Some tab content</h1>
      <p class="ng-star-inserted" style="">...One</p>
      <!---->
    </div>
  </mat-tab-body>

  <mat-tab-body class="mat-tab-body ng-tns-c5-1 ng-star-inserted" role="tabpanel" ng-reflect-_content="[object Object]" ng-reflect-position="1" id="mat-tab-content-0-1" aria-labelledby="mat-tab-label-0-1">
    <div class="mat-tab-body-content ng-trigger ng-trigger-translateTab" style="transform: translate3d(100%, 0px, 0px);">
      <!---->
    </div>
  </mat-tab-body>

</div>