親からセレクタを継承する

Question

4人の子供（vote-event、view-event、my-events、my-votes）のDOMを処理する親クラス（Event）を作成しようとしています。

アイデアは、いくつかの親メソッドをオーバーライドするHTML、親Compoment、および4個のchildrenコンポーネントを持つことです。典型的な多型のケースです。とにかく

、私は親コンポーネントを持つ：

@Component({ 
    selector: 'app-events', 
    templateUrl: './events.component.html', 
    styleUrls: ['./events.component.css'] 
}) 

export abstract class EventsComponent implements OnInit{ 
    constructor() {}; 
    ngOnInit() { 
     this.test(); 
    } 
    abstract test(); 
} 

親HTML：

<div id="main"> 
<div class="container pad-top"> 
    <div class="row"> 
    <div class="col-xs-12 nopadding text-center"> 
     <a [routerLink]="['/events/vote-events']"><img class="img-responsive sin-looks-votacion" 
                src="assets/images/no-tienes-votaciones.jpg"></a> 
    </div> 
    </div> 
</div> 

そして、私のような何かをしたいと思います：

子コンポーネント：

export class MyVotesComponent extends EventsComponent { 

    private potato; 

    constructor() { 
     super(); 
    } 

    test() { 
     console.log("Testttttttttttt"); 
    } 
} 

子供のHTML：

<app-events></app-events> 

事は、私がevents.module.ts宣言からEventsComponentを削除する必要がありました、です。そして今、ブラウザがスローされます。

'app-events' is not a known element: 

最後の質問は次のようになります。これは最善のアプローチですか？もしそうでなければ、何があろうか？私は何を読むべきですか？それが本当に最良のアプローチであれば、何が欠けていますか？

ありがとうございます。

すべてのベスト、

アレハンドロ

Answer 1

私はあなたが各サブクラスの@ComponentデコレータにtemplateUrlとstyleUrlsを複製する必要がありますと思います。しかし、少なくとも、あなたは一つの場所にファイルを保持することができます：あなたはおそらく、あなたの抽象基本クラスから@Componentデコレータを削除したいと思う

@Component({ 
    selector: 'my-votes', 
    templateUrl: './events.component.html', 
    styleUrls: ['./events.component.css'] 
}) 
export class MyVotesComponent extends EventsComponent { 

    private potato; 

    constructor() { 
     super(); 
    } 

    test() { 
     console.log("Testttttttttttt"); 
    } 
} 

。