Javascript 角度5：防止在选项卡之间更改时重新加载选项卡内容

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

房间详细信息.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.中实现。

您不能

当你路由一个组件时，一旦你离开它，你实际上就摧毁了它们

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

也许您可以尝试使用非路由组件（我不记得tabs是保留组件实例还是销毁它，但我想说他们保留了它），或者将IFrame连接到上面的路由器出口，并将其定位为绝对（当路由与您想要的路由不匹配时，不要显示它）

---

我知道这对于不重新加载组件来说很重要，但是iFrame很旧，并且没有得到广泛的应用

由于没有直接的方法可以做到这一点，我们可以使用简单的变通方法。其想法是只使用mat选项卡显示标题，但内容来自另一个部分，该部分位于tab HTML组件的正下方（如下面使用的mat网格）。此内容可见性将根据选项卡选择进行更改

<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.ts文件

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

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

}

---

显示您的代码和尝试…或者只使用常规div，通过

[hidden]=“condition”

显示/隐藏。不是

*ngIf

也会破坏和重新创建div。是的，但在这种情况下，它是多余的，因为选项卡已经在处理它了。这将是第二个选项，位于非路由制表符I tink之后，绝对定位之前。

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

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

}