Angular4 组件继承抽象 class

Question

我想为我的组件定义一个基础 class 以共享一些功能。所以我从 :

开始

export abstract class BaseComponent {
    protected getName(): string;
}

@Component(...)
export class MyComponent extends BaseComponent {
    protected getName(): string {
        return "MyComponent";
    }
}

但是在我需要向 BaseComponent 添加一些注释之后，比如 @HostListener('window:keydown', ['$event'])。所以我不得不将 @Component 添加到 BaseComponent 以启用 angular 注释。一切都很好......直到我尝试使用

在生产模式下编译

ng build --prod

:

Cannot determine the module for class BaseComponent

所以我将 BaseComponent 添加到 @NgModule，但我有 :

No template specified for component BaseComponent

所以我添加了

@Component({template: ''})

但我有:

Argument of type 'typeof BaseComponent' is not assignable to parameter of type 'Type'. Cannot assign an abstract constructor type to a non-abstract constructor type.

所以我删除了“abstract”关键字以在生产模式下编译我的项目。

你有解决办法吗？ 我讨厌坏主意！

Answer 1

更新 Angular 10+

从 Angular 10 开始，当使用 IVY 编译器时，继承的组件以及包含 Angular 功能的组件必须使用空的 @Directive() 装饰器进行装饰。

了解更多信息 here

无需添加 @Component() 注释来抽象 classes 或将它们注册到任何模块。

可能是您的代码中存在不符合 Angular 预期的错误。

我使用 Angular CLI 1.2.7 和 ng new <name> 命令创建了一个演示应用程序，并如下扩展 AppComponent class。

base.component.ts

import { HostListener } from '@angular/core';

export abstract class BaseComponent {
    @HostListener('click')
    onClick() {
        alert('Click');
    }
}

和

app.component.ts

import { Component } from '@angular/core';
import { BaseComponent } from './base.component';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent extends BaseComponent {
    title = 'app';
}

app.module class 没有任何改变。

位于基础组件中的点击处理程序运行没有任何问题。使用 ng build --prod 的 AOT 编译也没有给出任何错误。

此演示使用的是 angular v5.1.1

Angular4 组件继承抽象 class

Angular4 Components inheritance with abstract class

inheritance

components

abstract

typescript

angular

更新 Angular 10+