ネストされた角度コンポーネントHTMLセレクタを作成できますか？

Question

更新：Thierry Templierの応答：

以下は基本的にはやりたいことですが、残念ながら内部コンポーネントはレンダリングされません。そのようなHTMLセレクタを介してコンポーネントをネストする方法はありますか？私のクロムデバッガで

<custom-menu-bar-component (onCustomEvent)="handleEvent($event)"> 
    <custom-button-component></custom-button-component> 
    <custom-dropdown-component></custom-dropdown-component> 
</custom-menu-bar-component> 

、私は、レンダリングされているのみで、外側のコンポーネントを参照してください。

<custom-menu-bar-component> 
    <div class="row"> 
     ** Nothing here, where my two inner components should be :(
    </div> 
</custom-menu-bar-component> 

をそして、私のコンポーネントは、次のようになります。

CustomMenuBarComponent.ts：

import {Component} from 'angular2/core' 
import {CustomButtonComponent} from './CustomButtonComponent' 
import {CustomDropdownComponent} from './CustomDropdownComponent' 

@Component({ 
    selector: 'custom-menu-bar-component', 
    directives: [CustomButtonComponent, CustomDropdownComponent], 
    template: ` 
     <div class="row"></div> 
    ` 
}) 
export class CustomMenuBarComponent { 
} 

をCustomButtonComponent.ts：

import {Component, EventEmitter} from 'angular2/core' 
import {CustomEvent} from './CustomEvent' 

@Component({ 
    selector: 'custom-button-component', 
    outputs: ['onCustomEvent'], 
    template: ` 
     <button type="button" class="btn btn-light-gray" (click)="onItemClick()"> 
     <i class="glyphicon icon-recent_activity dark-green"></i>Button</button> 
    ` 
}) 
export class CustomButtonComponent { 
    onCustomEvent: EventEmitter<CustomEvent> = new EventEmitter(); 
    onItemClick(): void { 
     this.onCustomEvent.emit(new CustomEvent("Button Component Clicked")); 
    } 
} 

CustomDropdownComponentは、CustomButtonComponentとほぼ同じですが、テキストは異なります。私は、これらのコンポーネントをより有用で再利用可能にする前に、この非常に簡単な例を試してみようとしています。

このアプローチは可能ですか？私は、他の人がこれらのコンポーネントを手に入れやすく、より簡単で簡単なカスタムメニューバーを作成できるようにしています。

Answer 1

わからない何あなたの質問は、についてですが、

<custom-menu-bar-component (onCustomEvent)="handleEvent($event)"> 
    <custom-button-component></custom-button-component> 
    <custom-dropdown-component></custom-dropdown-component> 
</custom-menu-bar-component> 

は、ドキュメントのビットは、私が予想していたhttps://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#aftercontentで見つけることができCustomMenuBarComponent

のテンプレートに<ng-content></ng-content>を必要ともう少しこれは私が見つけたすべてでした。

http://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.htmlにも役立つ情報が含まれている可能性があります。 <custom-button-component></custom-button-component>要素に(onCustomEvent)="handleEvent($event)"を移動

更新

は、あなたが欲しいものを行う必要があります。 EventEmitterのイベントはバブルしません。あなたはCustomButtonComponentコンポーネントでのごEventEmitterインスタンス化していないので、あなたがエラーを持って実際に

Answer 2

：

@Component({ 
    (...) 
}) 
export class CustomButtonComponent { 
    onCustomEvent: EventEmitter<CustomEvent> = new EventEmitter(); // <----- 
    (...) 
} 

をそうしないと、あなたのコードが正しいようです。

更新

あなたはCustomMenuBarComponent 1にあなたのサブコンポーネントが含まれるようにng-contentを使用する必要があります。

@Component({ 
    selector: 'custom-menu-bar-component', 
    directives: [CustomButtonComponent, CustomDropdownComponent], 
    template: ` 
    <div class="row"> 
     <ng-content></ng-content> 
    </div> 
    ` 
}) 
export class CustomMenuBarComponent { 
}