Question

更新：Per Thierry Templier的回复：

下面基本上是我想要做的，但不幸的是内部组件没有渲染。有没有办法通过HTML选择器嵌套组件？

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

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

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"));
    }
}

我的组件看起来像这样：

CustomMenuBarComponent.ts：

InheritedType

CustomButtonComponent.ts：

InheritedType2

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的活动不会冒泡。

Answer 2

实际上您有错误，因为您没有在EventEmitter组件中实例化CustomButtonComponent：

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

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

2 个答案: