Angular 5组件继承与方法重写异常问题求助

嘿，我之前在Angular 5里搞组件继承方法重写的时候也踩过一模一样的坑！给你梳理下最可能的问题和解决办法：

核心问题：你可能实例化的是父组件，而非子组件 #

Angular的组件继承本质是TypeScript类继承，但组件是由Angular的DI系统实例化的——如果你的路由、模板里用的是父组件的选择器/类，那运行的就是父组件实例，自然只会执行父方法。

第一步：确保父组件方法是可继承的 #

父组件里要重写的方法不能是private修饰符，得用protected或public，这样子类才能访问并重写：

// prototype-parent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-prototype-parent',
  template: `
    <button (click)="triggerMethod()">触发方法</button>
  `
})
export class PrototypeParentComponent {
  // 用protected允许子类访问重写
  protected myMethod(): void {
    console.log('父组件原方法执行');
  }

  triggerMethod(): void {
    // 这里的this如果是子组件实例，会自动调用重写后的方法
    this.myMethod();
  }
}

第二步：正确实现子组件的重写 #

子组件要继承父组件类，并且方法签名要完全匹配（参数、返回类型一致，Angular 5对应TS版本还没有override关键字，直接写方法就行）：

// prototype-child.component.ts
import { Component } from '@angular/core';
import { PrototypeParentComponent } from './prototype-parent.component';

@Component({
  selector: 'app-prototype-child',
  // 子组件可以复用父组件模板，或者自定义模板
  template: `
    <button (click)="triggerMethod()">子组件触发按钮</button>
  `
})
export class PrototypeChildComponent extends PrototypeParentComponent {
  // 重写父组件方法，签名必须一致
  myMethod(): void {
    console.log('子组件重写方法执行');
  }
}

第三步：确保应用中使用的是子组件实例 #

这是最容易忽略的点！比如路由配置里要指定子组件，而不是父组件：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PrototypeChildComponent } from './prototype-child.component';

const routes: Routes = [
  // 这里一定要用子组件类，父组件只是被继承的基类，不要直接实例化它
  { path: '', component: PrototypeChildComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

另外还要注意：别在子组件模板里用<app-prototype-parent>标签，这会创建一个新的父组件实例，和子组件是完全独立的，自然执行父方法。

最后验证 #

启动应用后点击按钮，打开浏览器控制台，如果看到子组件重写方法执行，就说明重写生效啦！

内容的提问来源于stack exchange，提问作者E. Wedgeworth