Angular项目如何用自定义组件覆写父项目组件并保持路由URL不变

1. 复用父组件视图避免重复编写 #

继承父组件时可以直接复用父组件的视图资源，无需全量重写模板和样式：

• 完全复用父组件视图的场景，直接在CustomLoginComponent的@Component装饰器中引用父组件的模板、样式文件路径即可：

import { Component } from '@angular/core';
import { LoginComponent } from 'DemoApp/src/app/component/login.component';

@Component({
  selector: 'app-custom-login',
  // 直接引用父组件模板，无需自行编写html
  templateUrl: '../../../../node_modules/DemoApp/src/app/component/login.component.html',
  // 需要复用样式就同理引用父组件样式文件
  styleUrls: ['../../../../node_modules/DemoApp/src/app/component/login.component.css']
})
export class CustomLoginComponent extends LoginComponent {
  // 仅编写新增/覆写的业务逻辑即可
  handleCustomAction() {
    // 额外功能逻辑
  }
}

• 仅需修改部分视图的场景，可以配合Angular内容投影（ng-content）实现局部修改，不需要重写整份模板。

2. 保持原有路由URL不变替换渲染组件 #

你当前使用的动态服务架构是基于Angular依赖注入的替换策略实现的，不需要修改父应用的路由配置，按以下步骤操作即可：

方法一：复用现有动态服务架构 #

你已经配置了{provide:DynamicServ, useValue:CustomLoginService }，只需要确保CustomLoginService的导出规则和父应用约定的规则完全一致即可，参考写法：

// CustomLoginService
import { Injectable } from '@angular/core';
import { CustomLoginComponent } from './component/custom-login.component';

@Injectable()
export class CustomLoginService {
  // 该字段名必须和父应用DynamicServ约定的字段名完全匹配，比如父应用约定登录组件映射字段为loginComponent，此处保持命名一致即可
  loginComponent = CustomLoginComponent;
}

父应用的路由加载器会自动读取你注入的服务中导出的组件，替代原生LoginComponent渲染，路由URL完全保持原有规则不变。

方法二：路由优先级覆盖 #

如果你的项目根路由模块已经导入了父应用的路由配置，只需要调整路由声明顺序即可：

// AppRoutingModule
const routes: Routes = [
  // 优先声明和父应用登录路径完全一致的路由，Angular会优先匹配先声明的路由规则
  { path: 'login', component: CustomLoginComponent },
  // 父应用路由放在后面加载
  ...demoAppRoutes
];

该方案不需要依赖现有的动态服务架构，也可以实现访问原登录路径时渲染自定义组件的需求。

你找不到独立路由配置是因为父应用的路由规则已经打包在DemoApp的产物中，不需要你显式修改，通过上述两种方案都可以在不改动父应用代码的前提下实现需求。

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