Angular4组件继承与抽象类

Question

我想为我的组件定义一个基类来共享一些功能.所以我开始:

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启用角度注释.一切都很好......直到我试图在生产模式下编译

ng build --prod

:

无法确定类BaseComponent的模块

所以我加入BaseComponent了@NgModule,但我有:

没有为组件BaseComponent指定模板

所以我补充说

@Component({template: ''})

但我有 :

"typeof BaseComponent"类型的参数不能分配给"Type"类型的参数.无法将抽象构造函数类型分配给非抽象构造函数类型.

所以我删除了" abstract"关键字,以便在生产模式下编译我的项目.

你有解决方案吗？我不喜欢错误的观念!

Answer 1

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

可能是您的代码中存在一些不符合Angular期望的错误.

我使用Angular CLI 1.2.7创建了一个演示应用程序,并使用该ng new <name>命令扩展AppComponent类,如下所示.

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类没有以任何方式更改.

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

这个演示使用了角度v5.1.1