角度ngTemplate，ngTemplateOutlet，ngContent：选择模板的内容 预期行为问题其他问题

如何解决角度ngTemplate，ngTemplateOutlet，ngContent：选择模板的内容 预期行为问题其他问题

Angular ngTemplate，ngTemplateOutlet，ngContent：选择模板的内容

我有2个组成部分：AppComponent（<app></app>）和ModalComponent（<modal></modal>）。除了这些，没什么特别的

• ModalComponent利用NgContent
• AppComponent在其标记内有一个 Template

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]反映了该子级的类名。

问题

所有内容均未获得项目，只有1个例外：

• 如果我将class="modal template"添加到ng-container并用ng-content添加[select]=".modal.template"强>。也就是说，整个模板内容都被投影到一个插槽中。

此外，如果您在DOM Inspector中查看div#whatTheWhat，您会看到模板的每个子级都成为#whatTheWhat的直接后代。 这必须表示在“退出”模板之前发生了内容投影。。

其他

我们使用的是Angular 10，但我相信我实际上是在Angular 7应用中编写了这段代码（并且运行良好），但是自Angular 8+起，也许有些变化。

很明显，鉴于“问题”下的“例外”（如上），我可以将模板细分为每个子级，class将多个ng-container分解为每个ng-conent' s select，并投影了内容。如果您已读完本文，则可以假设那不是我想要的。

问题

是否可以“ select将特定的模板内容完全投影到另一个组件中”？您能想到一种方法来实现此，即使使用<template>和<slot> 这样的本地HTML元素吗？