Angular 5：在选项卡之间切换时防止重新加载选项卡内容答案

【问题标题】：Angular 5: Prevent to reload tab content when changing between tabsAngular 5：在选项卡之间切换时防止重新加载选项卡内容
【发布时间】：2018-05-29 18:10:30
【问题描述】：

我正在使用 Angular 5 开发基于 Material Design 的管理后端。其中一个视图是基于选项卡的，第一个选项卡包含 iframe。但是，当在不同的选项卡之间切换，然后导航到第一个包含 iframe 的选项卡时，会重新加载 iframe。目标是在选项卡之间切换而不重新加载其内容。我怎样才能做到这一点？

room-details.template.html

<mat-card class="p-0">
  <mat-tab-group>
    <mat-tab label="Vorschau">
      <mat-card-content class="mt-1">
          <iframe src="https://......" width="100%" height="400px" frameborder="0"></iframe>
      </mat-card-content>
    </mat-tab>
    <mat-tab label="Einstellungen">
      <mat-card-content>
        <p class="mt-1">Sprache</p>
        <mat-radio-group fxLayout="column">
          <mat-radio-button [style.marginBottom]="'.5rem'" value="1">Deutsch</mat-radio-button>
          <mat-radio-button [style.marginBottom]="'.5rem'" value="2">Englisch</mat-radio-button>
          <mat-radio-button [style.marginBottom]="'.5rem'" value="3">Französisch</mat-radio-button>
        </mat-radio-group>
        <mat-divider class="mb-1 mt-1"></mat-divider>
      </mat-card-content>
    </mat-tab>
  </mat-tab-group>
</mat-card>

目前该逻辑尚未在 room-details.component.ts 中实现。

【问题讨论】：

显示你的代码和你的尝试......

标签： javascript angular iframe material-design angular-material

【解决方案1】：

你不能。

当你路由一个组件时，一旦你离开它，你实际上会销毁它们。

这意味着，当您返回它时，您正在再次创建它，从而加载它的所有 HTML（包括您的 IFrame）。

也许您可以尝试使用非路由组件（我不记得选项卡是保留组件实例还是销毁它，但我会说他们保留它），或者将您的 IFrame 附加到上面的路由器插座，并且将其定位为绝对（并且在路线与您想要的路线不匹配时不显示它）。

我知道不重新加载组件会很麻烦，但 iframe 很旧，而且使用不那么广泛！

【讨论】：

或者只使用您通过[hidden]="condition" 显示/隐藏的常规 div。 NOT *ngIf 也会破坏并重新创建 div。
是的，但在这种情况下，它是多余的，因为选项卡已经在处理它。这将是我在非路由选项卡之后、绝对定位之前的第二个选项。

【解决方案2】：

由于没有直接的方法来做到这一点，我们可以使用一个简单的解决方法。这个想法是仅使用 mat-tab 显示标题，但内容来自另一个部分，该部分将位于 tab HTML 组件下方（如下面使用的 mat-grid）。此内容可见性将根据选项卡选择而变化。

<mat-tab-group [selectedIndex]="selected.value"
               (selectedIndexChange)="selected.setValue($event)"
               (selectedTabChange)="tabChanged($event)">
 <mat-tab *ngFor="let tab of tabs; let index = index">
      <ng-template mat-tab-label>
          {{tab.label}} &nbsp;
          <i class="icon XXX" (click)="removeTab(index)"></i>
      </ng-template>

  </mat-tab>
</mat-tab-group>
<mat-grid-list>
<mat-grid-tile *ngFor="let tab of tabs; let index = index"
        [style.display]='tab.active? "inline" : "none"'
        [style.position]='tab.active? "static" : "absolute"'>

    <iframe id="tabframe-{{tab.id}}" [src]='tab.url' ></iframe>

</mat-grid-tile>
</mat-grid-list>

并且，在 tab.component.ts 文件中，使用 tabChanged 事件，只要按照上面的 HTML 进行 tabchange 就会触发

export class TabbarComponent implements OnInit {

  tabs = [];
  tabChanged($event) {
    console.log($event);

    for (const ttab of this.tabs)  {
      ttab.active = false;
    }
    this.tabs[$event.index].active = true;
  }
}
}

还有tab.ts文件

export class Tab {
  label: string;
  url: SafeUrl;
  active: boolean;

  constructor(label: string) {
      this.label = label;
  }

}

【讨论】：