Angular路由参数变更时如何重新初始化ScopeChildren组件？

方法1：监听路由参数变化，手动触发组件初始化逻辑 #

Angular默认复用同路由组件，所以参数变更不会触发组件重新初始化，你可以在ScopeChildren组件内订阅路由参数变化，手动重新执行初始化逻辑：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-scope-children',
  templateUrl: './scope-children.component.html',
  styleUrls: ['./scope-children.component.css']
})
export class ScopeChildrenComponent implements OnInit, OnDestroy {
  private paramSub: Subscription | undefined;
  currentScope: string | undefined;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 初始化获取参数并执行逻辑
    this.currentScope = this.route.snapshot.paramMap.get('scope');
    this.initComponent();

    // 订阅参数变更，重新执行初始化
    this.paramSub = this.route.paramMap.subscribe(params => {
      this.currentScope = params.get('scope');
      this.initComponent();
    });
  }

  private initComponent(): void {
    // 这里写组件初始化的核心逻辑，比如请求数据、重置状态
    console.log('组件重新初始化，当前scope:', this.currentScope);
  }

  ngOnDestroy(): void {
    this.paramSub?.unsubscribe();
  }
}

方法2：用*ngIf强制销毁重建组件 #

在Main组件的模板中，给router-outlet绑定基于路由参数的*ngIf，通过参数变更触发组件的销毁与重建：

Main组件TS代码 #

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

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})
export class MainComponent {
  currentScope: string | null = null;

  constructor(route: ActivatedRoute, router: Router) {
    router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      distinctUntilChanged((_, __) => {
        const newScope = route.firstChild?.snapshot.paramMap.get('scope');
        return newScope === this.currentScope;
      })
    ).subscribe(() => {
      // 先置空触发销毁，再恢复触发重建
      this.currentScope = null;
      setTimeout(() => {
        this.currentScope = route.firstChild?.snapshot.paramMap.get('scope');
      }, 0);
    });
  }
}

Main组件HTML代码 #

<router-outlet *ngIf="currentScope"></router-outlet>

方法3：自定义路由复用策略，仅针对目标组件 #

创建自定义复用策略，让ScopeChildren组件在参数变化时不被复用，其他组件保持默认逻辑：

1. 创建自定义复用策略类 #

import { RouteReuseStrategy, DetachedRouteHandle, ActivatedRouteSnapshot } from '@angular/router';
import { ScopeChildrenComponent } from './scope-children/scope-children.component';

export class CustomReuseStrategy implements RouteReuseStrategy {
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    // 仅允许非ScopeChildren组件被缓存复用
    return route.component !== ScopeChildrenComponent;
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null): void {}

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    return null;
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    // 仅当路由配置和参数完全相同时才复用组件
    return future.routeConfig === curr.routeConfig && 
           JSON.stringify(future.params) === JSON.stringify(curr.params);
  }
}

2. 在AppModule中注册该策略 #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { CustomReuseStrategy } from './custom-reuse-strategy';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
// 导入你的组件
import { MainComponent } from './main/main.component';
import { ScopeChildrenComponent } from './scope-children/scope-children.component';
import { DashboardComponent } from './dashboard/dashboard.component';

@NgModule({
  declarations: [
    AppComponent,
    MainComponent,
    ScopeChildrenComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [
    { provide: RouteReuseStrategy, useClass: CustomReuseStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

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