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才能为我工作...对于cource我尝试设置'some-regular-angular2-component '进入父组件的[指令]，但是在ng-content中无法识别Angular 2组件......或者这对你有用吗？

Answer 1

您需要将<ng-content></ng-content>添加到<my-component-content>的视图（模板）中如果<my-component-content>不支持翻译，则不会显示其子项。代码中的<ng-content>代码仅适用于直接匹配的元素，但不适用于其子代。

Answer 2

回答我的问题，是的，angular 2 transclusion支持插入Angular 2组件。我在代码中写了一些愚蠢的错误。

Answer 3

是的。现在称为内容投影。请参阅具有多个广告位的模式对话框的this example。

多时隙转换是否适用于Angular 2组件？

3 个答案: