2017-03-11 21 views
2

使用する子コンポーネントを指定せずに親コンポーネントを定義することは可能でしょうか?角2:異なる子コンポーネントで同じ親コンポーネントを使用できますか?

通常、私は親コンポーネントを作成し、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> 

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

+0

'それとも、ルータを使いたいのですか? –

+0

あなたが提案したものはコードの重複もあります。 ** parent-component-selector **内のコンテンツも複製されます – Aravind

+0

@JBNizetは1つの解決策ですが、10個の子コンポーネントがある場合は、if式を使用するときれいに見えません。 –

答えて

3

を与えることができます私はあなたを正しく読んでいます、そして、あなたは基本的に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> 

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

+0

これはまさに私は探していた。必要なキーワードを知らなくても検索が難しい場合があります。私の場合、キーワードは "transclusion"(https://scotch.io/tutorials/angular-2-transclusion-using-ng-content)と思われます。ありがとう! –

+0

喜んで助けてください。 FYI、Angular 1(AngularJS)はそれをtransclusionと呼んでいます - Angular(2+)は今度はコンテンツ投影と呼んでいます - 同じ概念の別の言い方 – snorkpete

+0

ありがとう。これは素晴らしく、私が探していたものです。 –

関連する問題