Question

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

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

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

但是我需要在像@HostListener('window:keydown', ['$event'])之类的BaseComponent中添加一些注释。所以我必须将@Component添加到BaseComponent以启用角度注释。一切都很好......直到我尝试用生产模式编译

ng build --prod

无法确定类BaseComponent的模块

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

没有为组件BaseComponent
指定模板

所以我添加了

@Component({template: ''})

但我有：

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

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

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

Answer 1

没有必要将@Component（）注释添加到抽象类或将它们注册到任何模块。

你的代码中可能存在一些错误，而这些错误与Angular所期望的不一致。

我使用带有ng new <name>命令的Angular CLI 1.2.7创建了一个演示应用程序，并按如下方式扩展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类没有以任何方式改变。

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

此演示使用angular v5.1.1

Answer 2

这是您可以执行的角度FormArray验证

在打字稿文件中：

get contents(): FormArray {
    return this.teamForm.get('contents') as FormArray;
}

在HTML文件中

<label *ngIf="contents.controls[i].get('subject').valid">

`

Angular4组件继承与抽象类

2 个答案: