Могу ли я создавать вложенные угловые компоненты HTML-селекторов?

Question

Обновлено: Per 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> 

требует <ng-content></ng-content> в шаблоне CustomMenuBarComponent

Немного документации можно найти в https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#aftercontent я ожидал немного больше, это было все, что я нашел ,

http://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html может содержать определенную полезную информацию.

Update

(onCustomEvent)="handleEvent($event)" Перемещение к <custom-button-component></custom-button-component> элемент должен делать то, что вы хотите. События от EventEmitter не пузырятся.

Answer 2

На самом деле у вас есть ошибка, потому что вы не создаете экземпляр вашего EventEmitter в CustomButtonComponent компонента:

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

В противном случае ваш код кажется правильным.

Update

Вы должны использовать ng-content включить ваши компоненты к югу в CustomMenuBarComponent один.

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