javascript - 多槽嵌入是否适用于 Angular 2 组件？

Question

假设我有以下带有两个插槽的基本组件:

// my-component.component.ts
@Component({
  selector: 'my-component',
  template: `
<div class="my-component">
  <div>
    Title:
    <ng-content select="my-component-title"></ng-content>
  </div>
  <div>
    Content:
    <ng-content select="my-component-content"></ng-content>
  </div>
</div>`
})

在第二个槽('my-component-content')中，我想插入常规 Angular 2 组件...

<div class="app">
  <my-component>
    <div class="my-component">
      <div>
        Title:
        <my-component-title>
          This is the Component title!
        </my-component-title>
      </div>
      <div>
        Content:
        <my-component-content>
          <some-regular-angular2-component></some-regular-angular2-component>
        </my-component-content>
      </div>
    </div>
  </my-component>
</div>

其中“some-regular-angular2-component”是某些 Angular 2 组件的选择器...

@Component({
  selector:'some-regular-angular2-component'
})'

问题是“some-regular-angular2-component”永远不会嵌入到 ng-content 第二个插槽中...只有常规 HTML 对我有用...当然，我尝试设置“some-regular-angular2-component” ' 到父组件的 [指令] 中，但是 Angular 2 组件在 ng-content 内部无法被识别......或者这对你有用吗？

Answer 1

您需要添加<ng-content></ng-content>到 <my-component-content> 的 View (模板)如果<my-component-content>不支持嵌入，其子级不会显示。 <ng-content>代码中的标签仅适用于直接匹配的元素，而不适用于其子元素。