Angular路由异常：URL变更但子组件未加载问题排查

问题原因分析 #

这种场景差异的核心原因大概率是Angular路由复用机制导致父组件实例未重新初始化，进而引发子路由的<router-outlet>未正确绑定路由变化：

• 当从其他组件导航至/contracts时，Angular会复用已存在的ProjectsComponent实例（如果之前加载过），此时子路由的初始化逻辑可能未被触发。
• 刷新浏览器时，整个组件树会重新初始化，<router-outlet>会正确注册并监听子路由变化，因此点击链接后子组件能正常加载。

另外也可能存在以下次要原因：

• 相对路由路径的上下文问题：虽然URL变更正常，但路由导航的相对上下文在场景1中出现异常。
• 父组件使用OnPush变更检测策略，路由变化未触发组件变更检测，导致子组件视图未更新。

具体解决方法 #

方法1：使用绝对路径替代相对路径 #

修改父组件中的routerLink为绝对路径，明确指定完整路由路径，避免相对上下文的不确定性：

<a [routerLink]="['/contracts', contract._id]">{{ contract.name }}</a>

方法2：强制触发父组件的变更检测 #

如果父组件使用了OnPush策略，或路由复用导致变更检测未触发，可在父组件中手动监听路由变化并触发变更检测：

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

@Component({
  selector: 'app-projects',
  templateUrl: './projects.component.html',
  styleUrls: ['./projects.component.css']
})
export class ProjectsComponent implements OnInit {
  constructor(private router: Router, private cdr: ChangeDetectorRef) {}

  ngOnInit(): void {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      // 每次路由结束后强制触发变更检测
      this.cdr.detectChanges();
    });
  }
}

方法3：禁用父组件的路由复用 #

通过自定义路由复用策略，禁止Angular复用ProjectsComponent实例，确保每次导航到/contracts时都重新初始化组件：

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

import { RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle } from '@angular/router';

export class NoReuseStrategy implements RouteReuseStrategy {
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }

  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 {
    // 仅当路由路径完全相同时才复用，这里针对contracts路由禁用复用
    return future.routeConfig === curr.routeConfig && JSON.stringify(future.params) === JSON.stringify(curr.params);
  }
}

2. 在AppModule中注册该策略：

import { NgModule } from '@angular/core';
import { RouteReuseStrategy } from '@angular/router';
import { NoReuseStrategy } from './no-reuse.strategy';

@NgModule({
  providers: [
    { provide: RouteReuseStrategy, useClass: NoReuseStrategy }
  ]
})
export class AppModule {}

方法4：检查父组件的<router-outlet>是否正确 #

确保父组件模板中存在未被条件渲染（如*ngIf）的<router-outlet>，这是子组件加载的基础：

<!-- ProjectsComponent模板中必须包含 -->
<router-outlet></router-outlet>

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