我想为我的组件定义一个基类来共享一些特性。所以我开始说:

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以启用角度注释。一切都很好…直到我试图用生产模式编译
天然气生成——生产

无法确定类basecomponent的模块
所以我在BaseComponent中添加了@NgModule,但是我有:
没有为组件basecomponent指定模板
所以我补充说
@Component({template: ''})

但我有:
“TypeOfBaseComponent”类型的参数不能分配给“Type”类型的参数。无法将抽象构造函数类型分配给非抽象构造函数类型。
所以我删除了“abstract”关键字,以便在生产模式下编译我的项目。
你有解决办法吗?我讨厌坏主意!

最佳答案

不需要向抽象类添加@component()注释或将它们注册到任何模块。
可能是你的代码中有不符合Angular期望的错误。
我使用angular cli 1.2.7和ng new <name>命令创建了一个演示应用程序,并扩展了appcomponent类,如下所示。
基本组件

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

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


应用组件
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类没有以任何方式更改。
位于基本组件中的单击处理程序工作正常,没有任何问题。使用ng build --prod的aot编译也没有给出任何错误。
这个演示使用的是AngularV5.1.1

09-25 16:19