如何在Angular2中创建一个结构性组件

Question

我创建了一个结构性指令，可以添加或删除应用于其上的元素。

现在，我希望该指令向应用它的元素添加内容。但是使用指令似乎不可能，因为它没有自己的模板。 也许我应该创建一个组件而不是指令。这篇官方指南似乎暗示了这一点： https://angular.io/docs/ts/latest/guide/structural-directives.html

Angular提供了更复杂的布局管理技术，例如结构性组件，可以接受外部内容并将该内容合并到它们自己的模板中。选项卡和选项卡窗格控件是很好的例子。 我们将在未来的章节中学习有关结构性组件的内容。

该章节目前尚不存在，那么如何创建结构性组件？

以下是使用我的指令的代码：

<div class="..." *myDisplayer="form.controls.comment"></div>

< p> myDisplayer 指令根据与控件相关联的条件添加或删除 div 。现在我希望这个指令在添加 div 时也会添加一个 <img>。

- gentiane

---

请添加您的代码。我无法理解这个句子“现在，我将希望这个指令的内容应用到它所适用的元素上。” - Günter Zöchbauer

我更正了我的句子，因为我忘记了一个单词。你可以像ngIf指令一样看到我的指令，只是它不接受布尔值作为参数，而是接受AbstractControl，以观察自身条件。这没问题。现在我想让指令在出现时能够向其控制的元素添加内容（图像）。 - gentiane

请添加一些代码来演示您想要实现的内容。我仍然无法理解您的描述。 - Günter Zöchbauer

Answer 1

TL;DR:

内容投影（在Angular 1中称为Transclusion）似乎通过使用<ng-content> ... </ng-content>实现了"结构组件"的行为。

• 请参阅Rangle的Angular 2培训书中投影的解释。
• 请在toddmotto.com关于使用ng-content进行Angular 2中的Transclusion中查看更多信息。

---

不确定术语“结构组件”是否仍适用于我发现的答案，似乎“投影”是描述结构指令指南底部所述行为的正确术语。基本上，我们可以通过在组件模板中使用<ng-content>...</ng-content>指令标签来实现这一点。该组件将显示或“投影”组件元素标记内部的内容（因此，在这里应用术语时，它充当一个“结构组件”）。例如，这个<projection-example>组件将“投影/插入”传递给它的内容：

@Component({
  selector: 'projection-example',
  template: `
    <h4>{{name}}</h4>
    <ng-content></ng-content>
    <p>End of {{name}}</p>
  `,
  styles: [`* { border: dashed red 1px; }`]
})
export class ProjectionExampleComponent {
  name: string = 'Projection Example component';
}

例如，在 App 组件中使用（作为父组件）：

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>

    <projection-example>
    <p>My <i>projected</i> content.</p>
    </projection-example>
  `,
  styles: [`
    projection-example { display: block; border: dashed blue 1px; }
    p, i { border: dashed blue 1px; }
  `]
})
export class App {
  name: string = 'Angular2';
}

这导致（对于Angular 2.4.1）：

在这里查看：https://plnkr.co/edit/5r5vR1?p=preview

---

离题：我无意中在搜索谷歌“angular 2 advanced”时，在一篇指南中找到了这个行为的示例。遗憾的是，官方的Angular 2指南中仍没有包含此内容（写回答时还没有）。

在我看来，官方指南中误用了术语“结构性组件”，或者说这个术语不存在，或者在谷歌搜索中除了这个问题之外没有任何相关结果。

- edmundo096