1

我在 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

4

3 回答 3

1

ng-content have special power where you place it, there it will replace the select content.

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

Make sure where you add the ng-content there will be select content replaced. If you need Hello in up simply move the element first

<ng-template #lol>
  <div>Hello</div>
  <ng-content select=".world"></ng-content> <--- World will be printed
</ng-template>
于 2018-11-20T13:07:36.090 回答
0

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

然后应该像这样使用它：

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

这是您参考的示例 StackBlitz。

于 2018-11-20T13:03:07.390 回答
0

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

在你的情况下，整个<ng-template>被传递给你<ng-container>，因此它读作 Hello, World -<ng-content>删除它没有任何事情发生，你可能会发现相同的结果

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

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

尝试将内容从一个组件传递到另一个组件检查此链接

希望它有所帮助 - 快乐的编码:)

于 2018-11-20T13:22:10.420 回答