使用Angular Material <mat-tab>与<object>标签时页面重载问题求助

这个问题我之前也碰到过，Angular Material的<mat-tab>默认行为是切换到其他标签页时，销毁非活动标签页对应的组件，所以当你切回第二个标签页时，组件会重新初始化，站点自然就从头加载了。给你两个实用的解决办法：

方法一：使用preserveContent属性（最简单直接） #

Angular Material提供了preserveContent属性，只要在<mat-tab-group>上添加这个属性，就能让非活动标签页的DOM和组件实例保留下来，不会被销毁。这样切换回来的时候，组件的状态完全保持原样，站点也不会重新加载。

用法示例：

<mat-tab-group preserveContent="true">
  <mat-tab label="标签页1">
    <!-- 标签页1的内容 -->
  </mat-tab>
  <mat-tab label="标签页2">
    <!-- 加载目标站点的组件内容 -->
  </mat-tab>
</mat-tab-group>

这个方法几乎不需要额外的代码，适合大多数场景，省心又高效。

方法二：手动保存和恢复状态（灵活可控） #

如果担心preserveContent会占用过多内存（比如标签页内容非常复杂），或者需要精细控制状态的保存和恢复，可以手动管理组件状态：

1. 在目标组件中定义状态保存和恢复的方法
   比如保存页面滚动位置、表单数据等：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-target-site-tab',
  templateUrl: './target-site-tab.component.html'
})
export class TargetSiteTabComponent implements OnInit {
  // 保存滚动位置
  private savedScrollY: number = 0;
  // 可以添加更多需要保存的状态变量，比如表单数据、组件内部状态等

  ngOnInit(): void {
    // 组件初始化时恢复之前保存的滚动位置
    window.scrollTo(0, this.savedScrollY);
  }

  // 自定义保存状态的方法
  saveCurrentState(): void {
    this.savedScrollY = window.scrollY;
    // 这里可以保存其他需要保留的状态
  }
}

2. 在父组件中监听标签页切换事件，触发状态保存
   通过mat-tab-group的selectedIndexChange事件，在切换出第二个标签页时，调用目标组件的状态保存方法：

<mat-tab-group (selectedIndexChange)="handleTabSwitch($event)">
  <mat-tab label="标签页1">...</mat-tab>
  <mat-tab label="标签页2">
    <app-target-site-tab #targetTabRef></app-target-site-tab>
  </mat-tab>
</mat-tab-group>

父组件代码：

import { Component, ViewChild } from '@angular/core';
import { TargetSiteTabComponent } from './target-site-tab.component';

@Component({
  selector: 'app-tab-container',
  templateUrl: './tab-container.component.html'
})
export class TabContainerComponent {
  @ViewChild('targetTabRef') targetTab!: TargetSiteTabComponent;
  private lastActiveTabIndex: number = 0;

  handleTabSwitch(newIndex: number): void {
    // 如果之前激活的是第二个标签页（索引为1），保存它的状态
    if (this.lastActiveTabIndex === 1) {
      this.targetTab.saveCurrentState();
    }
    this.lastActiveTabIndex = newIndex;
  }
}

这样切换回第二个标签页时，组件会自动恢复之前保存的状态，避免站点从头加载。

内容的提问来源于stack exchange，提问作者Shubhendu Vaid