Angular2での親コンポーネントのテンプレートの使用

Question

親のテンプレートを、Angularのコンポーネントの継承を使用して継承したいとします。

イントロ

私はいくつかの基本的な構成要素を持っており、このコンポーネント（Child1ComponentとChild2Component）のいくつかのチャイルズ（のはそれParentComponentを呼びましょう）。私はParentComponentにデフォルトの動作を入れて、子供のコンポーネントでこの動作をセットアップ/拡張するだけです。 ParentComponentテンプレートにはすでに必要なものがすべて含まれているので、子供のコンポーネントでこのテンプレートをデフォルトで使用するようにします。

---

実装の第1の変形（動作しない、Error: No template specified for component Child1Component）：

@Component({ 
    selector: 'app-parent', 
    templateUrl: './app-parent.component.html', 
    styleUrls: ['./app-parent.component.scss'] 
}) 
export class ParentComponent { 
} 

@Component({ 
    selector: 'app-child1' 
}) 
export class Child1Component extends ParentComponent { 
} 


@Component({ 
    selector: 'app-child2' 
}) 
export class Child2Component extends ParentComponent { 
} 

---

私は親のテンプレートに子供のtemplateUrlとstyleUrlsを設定できることがわかったが、それは動作します子のViewEncapsulationがNoneに設定されている場合のみです。

第二の変形（それは動作しますが、私はそれを好きではない）：

@Component({ 
    selector: 'app-parent', 
    templateUrl: './app-parent.component.html', 
    styleUrls: ['./app-parent.component.scss'] 
}) 
export class ParentComponent { 
} 

@Component({ 
    selector: 'app-child1', 
    templateUrl: '../parent/app-parent.component.html', 
    styleUrls: ['../parent/app-parent.component.scss'], 
    encapsulation: ViewEncapsulation.None 
}) 
export class Child1Component extends ParentComponent { 
} 

@Component({ 
    selector: 'app-child2', 
    templateUrl: '../parent/app-parent.component.html', 
    styleUrls: ['../parent/app-parent.component.scss'], 
    encapsulation: ViewEncapsulation.None 
}) 
export class Child2Component extends ParentComponent { 
} 

私は

1. 子コンポーネントではありませんビューのカプセル化のこのソリューション原因を好きではありません。
2. すべての子コンポーネントのテンプレートとスタイルのURLがコピー・ペーストされます。

---

あなたは私のこのタスクのためのよりよい解決策を提案してくださいことはできますか？

Answer 1

デコレータ継承の規則があるため、2番目の方法が唯一可能です。https://github.com/angular/angular/issues/11606を参照してください。

@Componentデコレータは部分的に継承することはできません。すべてまたはすべてです。