2

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]

问题

没有任何内容获得项目，但有 1 个例外：

  • 如果我添加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的select离子，并投射内容。如果你已经读到这里，你可以假设这不是我想要的。

问题

有没有办法“将select特定的模板内容积极地投射到另一个组件中”？即使使用原生 HTML 元素（例如<template>和<slot>），你能想出一种方法来实现这一点吗？

4

0 回答 0