1

我有一个toolbar使用选择器将内容投影到多个插槽的组件：

<ng-content select="[left]"></ng-content>
<ng-content></ng-content>
<ng-content select="[right]"></ng-content>

当直接在父级中使用时，内容会正确投影：

<section>
  <p>Content is projected correctly</p>
  <toolbar>   
    <button>Center</button>
    <button right>Right</button>
    <button left>Left</button>
</toolbar>
</section>

内容正确显示

使用ng-templateandngTemplateOutlet将内容传递到工具栏时，它不起作用。内容是投影的，但所有内容最终都在<ng-content></ng-content>包罗万象中。

<ng-template #toolbarContent>
  <button>Center</button>
  <button right>Right</button>
  <button left>Left</button>
</ng-template>

<section>
  <p>Content is projected incorrectly</p>
  <toolbar><ng-container [ngTemplateOutlet]="toolbarContent"></ng-container></toolbar>
</section>

内容显示不正确

如何将通过ngTemplateOutlet项目提供的模板中的内容放到正确的插槽中？

Stackblitz 代码：https ://stackblitz.com/edit/angular-grid-toolbar?embed=1&file=src/app/app.component.html

4

0 回答 0