Question

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

室温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中实现。

Answer 1

你做不到。

当你的路线成为一个组件时，一旦你离开它，你实际上就会摧毁它们。

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

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

我知道只是不重新加载一个组件，但是iframe很旧，而且没有那么广泛使用！

Answer 2

由于没有简单的方法可以执行此操作，因此我们可以使用一种简单的解决方法。想法是仅使用mat-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;
  }

}

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

2 个答案: