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

在我的 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 {
}

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>

在CustomMenuBarComponent

的模板中需要<ng-content></ng-content>

可以在 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 的事件不会冒泡。

Answer 2

事实上你有错误是因为你没有在 CustomButtonComponent 组件中实例化你的 EventEmitter:

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

否则你的代码似乎是正确的。

更新

您需要使用 ng-content 将您的子组件包含到 CustomMenuBarComponent 中。

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

我可以创建嵌套的 Angular 组件 HTML 选择器吗？

Can I Create Nested Angular Component HTML Selectors?

nested

selector

angular-template

angular