У меня есть компонент 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-template и ngTemplateOutlet для передачи содержимого на панель инструментов оно не работает. Содержимое проецируется, но все содержимое заканчивается в <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