Angular 12：点击已选中的mat-tab-link无法刷新页面求助

步骤1：配置路由支持同URL导航刷新 #

在路由配置文件（如app-routing.module.ts）中添加以下配置，让Angular允许重复导航到同一路由并重新触发组件逻辑：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Page1Component } from './page1/page1.component';
import { Page2Component } from './page2/page2.component';
import { Page3Component } from './page3/page3.component';

const routes: Routes = [
  { 
    path: 'page1', 
    component: Page1Component,
    runGuardsAndResolvers: 'always' // 强制重新运行守卫和解析器
  },
  { 
    path: 'page2', 
    component: Page2Component,
    runGuardsAndResolvers: 'always'
  },
  { 
    path: 'page3', 
    component: Page3Component,
    runGuardsAndResolvers: 'always'
  },
  { path: '', redirectTo: '/page1', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    onSameUrlNavigation: 'reload', // 允许同URL导航触发刷新
    scrollPositionRestoration: 'top' // 可选：导航后滚动到页面顶部
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

步骤2：修改导航栏点击事件逻辑 #

1. 更新HTML模板 #

替换原点击事件为自定义方法，改用routerLinkActive的状态判断激活状态（更准确），移除无效的selectedTabChange事件：

<div class="app-nav">
  <nav #tabs mat-tab-nav-bar mat-align-tabs="center">
    <a mat-tab-link 
       *ngFor="let routeLink of routeLinks; let i = index" 
       [routerLink]="routeLink.link" 
       routerLinkActive
       #rla="routerLinkActive" 
       [active]="rla.isActive"
       (click)="handleTabClick(i)">
      {{routeLink.label}}
    </a>
  </nav>
</div>

<div class="app-div">
  <router-outlet></router-outlet>
</div>

2. 更新TypeScript逻辑 #

添加handleTabClick方法，处理当前激活标签的点击事件：

import { ChangeDetectionStrategy, Component, ViewChild } from "@angular/core";
import { Router } from "@angular/router";
import { Observable } from "rxjs-compat";

@Component({
    selector: 'app-app-control',
    templateUrl: './app-control.component.html',
    styleUrls: ['./app-control.component.scss']
})
export class AppControlComponent {
    routeLinks: any[];
    asyncTabs: Observable<any>;
    activeLinkIndex = 0;

    @ViewChild('tabs', {static: false}) tabs;
    
    constructor(private router: Router) {
        this.routeLinks = [
            {label: 'Page1', link: 'page1'},
            {label: 'Page2', link: 'page2'},
            {label: 'Page3', link: 'page3'}
        ];

        this.asyncTabs = new Observable((observer: any) => {
            setTimeout(() => {
                observer.next(this.routeLinks);
            }, 1000);
        });

        this.activeLinkIndex = this.routeLinks.findIndex(tab => 
            this.router.url.includes(tab.link)
        );
    }

    handleTabClick(i: number) {
        this.activeLinkIndex = i;
        const targetLink = this.routeLinks[i];
        if (this.router.url.includes(targetLink.link)) {
            // 手动触发同URL导航，强制刷新
            this.router.navigate([targetLink.link]);
        }
    }

    realignInkBar() {
        this.tabs._alignInkBarToSelectedTab();
    }
}

步骤3：在页面组件中实现刷新逻辑 #

以Page1Component为例，监听路由导航事件，确保回到当前页面时重新加载数据：

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-page1',
  templateUrl: './page1.component.html',
  styleUrls: ['./page1.component.scss']
})
export class Page1Component implements OnInit {

  constructor(private router: Router) { }

  ngOnInit(): void {
    this.loadPageData();
    // 监听导航事件，重新加载数据
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd && event.url.includes('page1'))
    ).subscribe(() => {
      this.loadPageData();
    });
  }

  loadPageData(): void {
    // 替换为你的实际数据加载逻辑（如API调用）
    console.log('Page1 数据已刷新');
  }
}

原理说明 #

• onSameUrlNavigation: 'reload'：告诉Angular路由器，导航到当前已激活URL时触发完整导航生命周期。
• runGuardsAndResolvers: 'always'：强制每次导航（包括同URL）运行守卫和解析器，确保数据重新获取。
• 手动触发router.navigate：点击当前激活标签时主动触发导航，触发后续刷新逻辑。

内容的提问来源于stack exchange，提问作者Gal Brender