Angular中如何让组件既可作为路由入口又能嵌入其他组件模板

你遇到的冲突本质是AModule中定义的空路径（path: ''）路由，在被导入到BModule时，会和BModule的路由上下文合并，空路径优先匹配到了AComponent，直接覆盖了BComponent的路由渲染。

方案1：改造AModule为可配置模块（推荐，兼容所有Angular版本，无需拆分模块） #

通过给AModule增加静态配置方法，按需决定是否加载路由配置，不需要额外拆分新模块：

1. 改造AModule代码：

import { ModuleWithProviders, NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AComponent } from './a.component';

// 模块配置项定义
interface AModuleOptions {
  enableRouting?: boolean;
}

@NgModule({
  declarations: [AComponent],
  exports: [AComponent]
})
export class AModule {
  static withRouting(options: AModuleOptions = { enableRouting: false }): ModuleWithProviders<AModule> {
    const extraImports = [];
    // 仅当开启路由配置时才导入路由规则
    if (options.enableRouting) {
      extraImports.push(RouterModule.forChild([
        { path: '', component: AComponent, pathMatch: 'full' }
      ]));
    }
    return {
      ngModule: AModule,
      imports: extraImports
    };
  }
}

2. 路由懒加载时开启路由配置：

{
  path: 'a',
  loadChildren: () => import('./a/a.module')
    .then((m) => m.AModule.withRouting({ enableRouting: true })),
}

3. BModule导入时不开启路由，不会产生路由冲突：

@NgModule({
  declarations: [BComponent],
  imports: [
    RouterModule.forChild([{ path: '', component: BComponent }]),
    AModule // 直接导入基础模块，不带路由配置
  ],
  exports: [BComponent]
})
export class BModule { }

方案2：使用独立组件（Angular14+适用，更轻量化） #

如果你的项目使用Angular14及以上版本，可以直接把ComponentA改为独立组件，彻底脱离模块绑定：

1. 改造AComponent为独立组件：

@Component({
  selector: 'app-a', // 建议改个自定义选择器，不要和原生<a>标签冲突
  standalone: true,
  templateUrl: './a.component.html',
  imports: [/* 这里放AComponent需要的依赖，比如CommonModule */]
})
export class AComponent {}

2. 路由直接加载组件，不需要AModule：

{
  path: 'a',
  loadComponent: () => import('./a/a.component').then(m => m.AComponent)
}

3. B模块/组件直接导入AComponent即可使用：

// 如果BComponent也是独立组件，直接在组件注解的imports里加AComponent
// 如果用模块写法，直接在BModule的imports里加AComponent

你当前给ComponentA设置的selector: 'a'和HTML原生<a>标签重名，很容易引发样式、事件的意外冲突，建议改成自定义前缀的选择器比如app-a。

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