Angular ngTemplate, ngTemplateOutlet, ngContent: выберите содержимое шаблона

Question

Angular ngTemplate, ngTemplateOutlet, ngContent: выберите содержимое шаблона

У меня есть 2 компонента: AppComponent (<app></app>) и ModalComponent (<modal></modal>). В них нет ничего особенного, кроме:

• ModalComponent рычаги NgContent
• AppComponentв разметке есть шаблон

modal.component.html

<div class="modal">
    <header class="modal header">
        <ng-content select=".modal.header.title"></ng-content>
        <span class="header close">X</span>
    </header>
    <main class="modal body">
        <ng-content select=".modal.body.content"></ng-content>
    </main>
    <footer class="modal footer">
        <menu class="footer button group">
            <ng-content select=".modal.footer.button"></ng-content>
        </menu>
    </footer>
</div>

app.component.html

<div id="whatTheWhat">
    <ng-container *ngTemplateOutlet="tpl"></ng-container>
</div>

<modal>
    <ng-container *ngTemplateOutlet="tpl"></ng-container>
</modal>

<ng-template #tpl>
    <h1 class="modal header title">Modal Content Works!!!</h1>
    <div class="modal body content">
        ...
    </div>
    <button class="modal footer button">Confirm!</button>
</ng-template>

Ожидаемое поведение

Каждый из детей внутри [#tpl] проецируется в каждый ng-content где [select] отражает имя класса ребенка.

Проблема

Ни один контент не получает проект, за одним исключением:

• Если я добавлю class="modal template" к ng-container и добавить ng-content с участием [select]=".modal.template" потом работает, но только оптом. То есть все содержимое шаблона проецируется в один слот.

Более того, если вы посмотрите на div#whatTheWhatв DOM Inspector, вы увидите, что каждый из детей шаблона становится прямым Потомком из #whatTheWhat. Это должно означать, что контент-проекция происходит до "выхода" из шаблона.

Дополнительные

Мы используем Angular 10, но я считаю, что написал этот код практически точно в приложении Angular 7 (и он работал нормально), но, возможно, что-то изменилось со времен Angular 8+.

Очевидно, с учетом "исключения" в разделе "Проблема" (см. Выше) я мог бы разделить свой шаблон на каждого из его дочерних элементов, classесли несколько ng-containers, чтобы отразить каждый ng-conentс selection и проецировать контент. Если вы дочитали до этого места, то можете предположить , что я не этого хочу.

Вопрос

Есть ли способ "select"проецировать конкретное содержимое шаблона в другой компонент"? Можете ли вы придумать способ добиться этого, даже используя собственные элементы HTML, такие как <template> и <slot>?