web-dev-qa-db-ja.com

抽象クラスを使用したAngular4コンポーネントの継承

コンポーネントの基本クラスを定義して、いくつかの機能を共有したいと思います。だから私は始めました：

_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に追加して、angular注釈を有効にしなければなりませんでした。すべてが良かったです...

ng build --prod

：

クラスBaseComponentのモジュールを特定できません

だから私はBaseComponentを_@NgModule_に追加しましたが、私は持っていました：

コンポーネントBaseComponentにテンプレートが指定されていません

だから私は追加しました

_@Component({template: ''})
_

しかし、私は持っていた：

タイプ「typeof BaseComponent」の引数は、タイプ「Type」のパラメーターに割り当てることができません。抽象コンストラクター型を非抽象コンストラクター型に割り当てることはできません。

だから私は私のプロジェクトを本番モードでコンパイルするために「abstract」キーワードを削除しました。

解決策はありますか？ 悪い発想が嫌い！

angulartypescriptinheritancecomponentsabstract
16
Chklang

@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クラスは変更されていません。

基本コンポーネントにあるクリックハンドラーは問題なく機能しました。 ng build --prodを使用したAOTコンパイルでもエラーは発生しませんでした。

このデモではangular v5.1.1を使用していました

25
JeanPaul A.