角2：異なる子コンポーネントで同じ親コンポーネントを使用できますか？

Question

使用する子コンポーネントを指定せずに親コンポーネントを定義することは可能でしょうか？

通常、私は親コンポーネントを作成し、HTMLファイル内の子コンポーネントのセレクタを使用することになり

親コンポーネント-1.html：

//some logic 
<child-component-1-selector></child-component-1-selector> 
//some logic 

私は私がしなければならない。このアプローチに従っている場合どの種類の子コンポーネントを使用するかを定義します。

親コンポーネント-1.htmlを：私は別の子コンポーネントに親コンポーネントを複数回使用したい場合はしかし、私は、ロジック部分をコピーして、別の親のコンポーネントを作成する必要が

//some logic 
<child-component-1-selector></child-component-1-selector> 
//some logic 

parent-コンポーネント - 2.html：

//some logic (same as above) 
<child-component-2-selector></child-component-2-selector> 
//some logic (same as above) 

私はコードの重複を生成するため、アプローチが嫌いです。どの子コンポーネントをレンダリングするかを指定せずに子コンポーネントを引数として渡すだけで、親コンポーネントを定義する方法はありますか？

現在のアプローチ、 壮大-親component.html：

<parent-component-1></parent-component-1> 
<parent-component-2></parent-component-2> 

は、 壮大な親-component.htmlをアプローチを提案した：

<parent-component-selector [childcomponent] = "child-component-1"></parent-component-selector> 
<parent-component-selector [childcomponent] = "child-component-2"></parent-component-selector> 

私は私は私の自己明らかに作られたと思っています私の「問題」について場合は、別の場所で

<my-custom-panel> 
    <here-is-one-inner-component> 
</my-custom-panel> 

そして、

<my-custom-panel> 
    <some-other-component> 
</my-custom-panel> 

：たぶん君たちは私を助けて、あなたのような何かをできるようにしたいようですねベストプラクティスについての提案に

Answer 1

を与えることができます私はあなたを正しく読んでいます、そして、あなたは基本的にAngularのコンテンツ投影法を見ています。

ので、上記の私の例では、私はこのように見えるように私のカスタムパネルのコンポーネントを記述します

@Component({ 
    selector: 'my-custom-panel', 
    template: ` 
    <div class="wrapper"> 
     <h1>My Heading</h1> 
     <ng-content></ng-content> 
    </div> 
    ` 
}) 
export class .... 

トリックは、コンポーネントのテンプレート内のマーカーとして作用する<ng-content>タグ、です。別のテンプレートでカスタムパネルを使用すると、my-custom-panelタグ内に表示されるコンテンツは、その<ng-content>タグのすぐ隣に投影されます。

うまくいけば、例があればわかりやすくなります。だから、私のカスタムパネルを使用してテンプレートがある私の最初の例の場合には：

<my-custom-panel> 
    <here-is-one-inner-component> 
</my-custom-panel> 

に変換されます：

<div class="wrapper"> 
     <h1>My Heading</h1> 
     <ng-content></ng-content> 
     <here-is-one-inner-component> 
</div> 

あなたが探しているものということですか？