javascript - Angular 5 : Prevent to reload tab content when changing between tabs

Question

我正在使用 Angular 5 开发基于 Material Design 的管理后端。其中一个 View 是基于选项卡的，第一个选项卡包含 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 中实现。

Answer 1

你不能。

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

这意味着，当您返回它时，您将再次创建它，从而加载其所有 HTML(包括您的 IFrame)。

也许你可以尝试使用非路由组件(我不记得选项卡是否保留组件实例或销毁它，但我会说他们保留它)，或者将你的 IFrame 连接到上面的路由器导出，并且将其定位为绝对位置(并且当路线与您想要的路线不匹配时不显示它)。

我知道不重新加载组件会带来很多麻烦，但 iframe 很旧，而且使用得并不广泛!