Angular模块加载子路由：router.navigate后组件未加载问题排查

问题原因 #

• 构造函数时机过早：在InitilisationComponent的构造函数中执行导航时，组件尚未完成初始化，也未完全接入Angular的路由树，此时触发导航会干扰路由的正常激活流程，导致子组件无法正确挂载。
• 路由数据订阅时机错误：构造函数中this.route.parent?.data的订阅可能无法获取到正确的路由数据，因为此时父路由的关联还未完全建立。
• 导航上下文不明确：未指定导航的相对上下文，虽然URL正确变化，但Angular可能无法正确关联到当前组件的子路由配置。

解决方案 #

方案1：将导航逻辑移至ngOnInit钩子 #

将导航代码从构造函数移到ngOnInit，此时组件已完成初始化，路由关联也已建立：

import { OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

export class InitilisationComponent implements OnInit {
  constructor(private route: ActivatedRoute, private router: Router) {}

  ngOnInit(): void {
    this.route.data.subscribe(data => {
      const response = data['mockData'];
      if (response) {
        // 指定相对当前路由的上下文，确保匹配子路由
        this.router.navigate([response.path], { relativeTo: this.route })
          .then(() => console.log("路由导航成功"))
          .catch(err => console.error('导航错误:', err));
      }
    });
  }
}

方案2：在Resolver中直接处理导航（更推荐） #

既然MockApiResolver已经获取到目标路径，可直接在Resolver中完成导航，让组件逻辑更单一：

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, Router } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class MockApiResolver implements Resolve<any> {
  constructor(private router: Router) {}

  resolve(route: ActivatedRouteSnapshot): any {
    // 模拟后端返回的路由数据
    const mockResponse = { path: 'options' };
    
    // 直接导航到目标路由
    this.router.navigate([mockResponse.path]);
    return mockResponse;
  }
}

方案3：检查子路由模块配置 #

确保OptionsModule的路由正确绑定了目标组件：

// options.module.ts中的路由配置
const routes: Routes = [
  { path: '', component: OptionsComponent } // 确保子路由默认组件配置正确
];

关键说明 #

• 避免在构造函数中执行路由导航，ngOnInit是组件初始化后更安全的操作时机。
• 使用{ relativeTo: this.route }明确导航上下文，确保Angular能正确匹配当前组件的子路由。
• 路由Resolver适合处理初始化阶段的数据获取与路由跳转，能简化组件的职责。

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