?? ? Angular ??????? ???? ?? ???? ? ?? ??? ? ???? ???? ??? ?? ??? ??????. ? ??? ??? ??? ???? ???? ? ??? ??? ? ??? ???? ??? ? ??? ?? ? ??????.

? ??? ?????? ????? ? ??? ???? ??? ???? ????????. ?? ?? ?? ??? ??? ???? ?????? ???? ?????.

??

????? ? ??? ???? ????? ???? ?? ???? ??? ??? ??????. ??? ??? ?? ? ???? ??? ???? ???? ??? ? ????? ????? ? ????. ? ??? ????? ??? ?????.

1. ???? ?? ?? ?? ??? ??? ?????.
2. ???? ??? ??? ? ??? ??? ?????.

???

window.scrollY? ???? ?? ?? ??? ??? ???? ?? ?? ??? ??? ? ????. ???? ??? ?? ???? ??? ??? ???? ?????.

??? ?? ??? ??? ????.

1. ??? ?? ?? ??

? ??? ??? ??? ???? ??? ????.

export class TabComponent {
  activeTab: string = 'tab1';
  tabScrollStates: { [key: string]: number } = {};

  onTabChange(newTab: string): void {
    // 保存活動標(biāo)簽的當(dāng)前滾動位置
    this.tabScrollStates[this.activeTab] = window.scrollY || 0;

    // 更新活動標(biāo)簽
    this.activeTab = newTab;

    // 恢復(fù)新標(biāo)簽的滾動位置
    const savedScrollPosition = this.tabScrollStates[newTab] || 0;
    // 延遲滾動恢復(fù)以確保DOM已更新為新的標(biāo)簽內(nèi)容
    setTimeout(() => {
      window.scrollTo(0, savedScrollPosition);
    }, 0);
  }
}

2. ??? ??? ?????

????? onTabChange ???? ?? ?? ???? ??????.

<div>
  <button (click)="onTabChange('tab1')">Tab 1</button>
  <button (click)="onTabChange('tab2')">Tab 2</button>
</div>

<div *ngIf="activeTab === 'tab1'">
  <p>Tab 1 的內(nèi)容 (這里可以有很多內(nèi)容)</p>
</div>

<div *ngIf="activeTab === 'tab2'">
  <p>Tab 2 的內(nèi)容 (這里也可以有很多內(nèi)容)</p>
</div>

3. ??? ??

• ????:????? ???? ?? ?? ??? ???? ?? ????? ??? ???? ?? ??? ??? ?? ??? ??? ?????.
• ?? ???: ?? ???? ????? window.scrollX? ?????.

const savedHorizontalScroll = window.scrollX || 0;
setTimeout(() => {
  window.scrollTo(savedHorizontalScroll, savedScrollPosition);
}, 0);

??

??? ??? ????? ???? Angular ??????? ??? ??? ?? ???? ? ????. ? ???? ???? ???? ? ??? ????? ?? ?? ?????.

??? ??? ?? ??? ??? ?? ???? ?? ??? ???? ???? ?? ??? ??? ???!
??? ?????! ?

? ??? Angular?? ? ?? ? ??? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!