私はテンプレートを使用してコンポーネントを持っているAngular2コンポーネント

Question

に渡されたデータを取得します。

<some-component> 
    <div>some stuff </div> 
</some-component> 

にはどうすればいいのコンポーネントに渡されたデータを取得し、テンプレート内のいくつかの場所にそれらをプッシュすることができますか？

Answer 1

あなたは<ng-content></ng-content>を同じものとして使用できます。このような

some-component使用中のNG-内容： - 基本的には

@Component({ 
    selector: 'some-component', 
    template: `left <ng-content></ng-content> right`, 
}) 
class SomeComponent {} 

@Component({ 
    selector: 'my-app', 
    template: `<some-component>INSERTED</some-component>`, 
    directives: [some-component], 
}) 
class MyApp {} 

は、<ng-content></ng-content>はあなたにも命名使用することにより、単一のコンポーネントで複数のng-contentを使用することができアンギュラ1.

からtranscludeのようなものですこのようなNG-コンテンツ ： -でこれを使用するために

<child-select> 
    <section>Section Content</section> 
    <div class="class-select"> 
     div with .class-select 
    </div> 
    <footer>Footer Content</footer> 
    <header>Header Content</header> 
    </child-select> 

あなたは、このようなテンプレートで指定する必要がありコンポーネント： -

ここ

<div style="border: 2px solid red; padding: 1rem; margin: 2px;"> 
     <h4>Child Component with Select</h4> 
     <div style="border: 2px solid orange; padding: 1rem; margin: 2px"> 
      <ng-content select="header"></ng-content> 
     </div> 
     <div style="border: 2px solid green; padding: 1rem; margin: 2px"> 
      <ng-content select="section"></ng-content> 
     </div> 
     <div style="border: 2px solid pink; padding: 1rem; margin: 2px"> 
      <ng-content select=".class-select"></ng-content> 
     </div> 
     <div style="border: 2px solid purple; padding: 1rem; margin: 2px"> 
      <ng-content select="footer"></ng-content> 
     </div> 
    </div> 

取り組んでいるplnker Working Plunker