我可以创建嵌套的 Angular 组件 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>

在我的 chrome 调试器中，我只看到正在渲染的外部组件：

<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 {
}

自定义按钮组件.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也可能包含一些有用的信息。

更新

移动(onCustomEvent)="handleEvent($event)"到<custom-button-component></custom-button-component>元素应该做你想做的。EventEmitter从不冒泡的事件。