Question

我在Angular内容投影方面面临一些挑战。我有一个模板，该模板针对将要使用的每个实例都具有一些通用的HTML，另外一部分会通过包含（ng-content而随情况而变化。问题是，无论我在模板DOM元素上使用的顺序如何，输出始终是相同的。这是代码：

<ng-template #lol>
  <ng-content select=".world"></ng-content>
  <div>Hello</div>
</ng-template>

<ng-container [ngTemplateOutlet]="lol">
  <div class="world">World</div>
</ng-container>

我希望产生的结果是：

World
Hello

鉴于我先放置了被包含元素，然后才放置模板的静态部分。但是，即使我在模板上切换顺序，结果也始终是：

Hello
World

我不明白为什么。有人可以说明为什么会发生这种情况，我该怎么做才能产生所需的输出？谢谢。

注意：：这是一个带有完整示例的StackBlitz：https://stackblitz.com/edit/angular-vfecbs?file=src%2Fapp%2Fapp.component.html

Answer 1

您可能没有正确使用它。假设您正在使用在OP中指定的名为HelloComponent的组件中的模板代码。

然后应像这样使用它：

<app-hello>
  <p class="world">Some projected Content</p>
</app-hello>

这是您推荐的Sample StackBlitz。

Answer 2

ng-content在您放置它的地方具有特殊功能，它将代替所选内容。

<ng-template #lol>
  <ng-content select=".world"></ng-content> <--- World will be printed here
  <div>Hello</div>
</ng-template>

确保在添加ng-content的位置将替换选择的内容。如果您需要 Hello ，只需先移动元素

<ng-template #lol>
  <div>Hello</div>
  <ng-content select=".world"></ng-content> <--- World will be printed
</ng-template>

Answer 3

内容投影是将内容从一个component投影到另一内容的概念-如果您要从child组件向您的parent组件传递一些值，并且该值会动态变化，那么您可以进行内容投射

在您的情况下，整个<ng-template>被传递到您的<ng-container>，因此读为Hello，World-<ng-content>删除它没有任何反应，您可能会发现相同的结果< / p>

<ng-container [ngTemplateOutlet]="lol">
  <div>Hello</div>
  <div class="world">World</div>
</ng-container>

当您检查代码时，您的输出将是这样的-因此只有<div>Hello</div>被嵌入到您的容器中-它不会将任何内容形式的内容传递给<ng-template>-似乎没有修复它的方法

尝试将内容从一个组件传递到另一个check this link

希望有帮助-编码愉快：）

角度模板和包含：内容混乱

3 个答案: