我想为我的组件定义一个基类来共享一些特性。所以我开始说:
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