如何在angular2中创建结构组件答案

【问题标题】：How to create a structural component in angular2如何在angular2中创建结构组件
【发布时间】：2017-01-26 13:38:46
【问题描述】：

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

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

Angular 提供了更复杂的技术来管理布局，例如可以获取外部内容并将该内容合并到自己的模板中的结构组件。选项卡和选项卡窗格控件就是很好的例子。我们将在以后的章节中了解结构组件。

章节还不存在，如何创建结构组件？

这是使用我的指令的代码：

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

myDisplayer 指令根据链接到控件的条件添加或删除 div。现在我希望指令在添加时在 div 中添加一个 <img>。

【问题讨论】：

请添加您的代码。我无法理解这句话“现在，我希望指令成为应用它的元素的内容。”
我更正了我的句子，因为我忘记了一个单词。你可以看到我的指令，就像 ngIf 指令一样，除了它不将布尔值作为参数，而是使用 AbstractControl 来观察它以确定自己的条件。没关系。现在我希望指令可以在它出现时向它控制的元素添加内容（图像）。
添加一些代码来演示您尝试完成的工作。我仍然无法理解您的描述。

标签： angular

【解决方案1】：

TL;DR:

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

参见Rangle's Angular 2 上Projections 的解释培训手册。
在 Angular 2 中的 toddmotto.com about Transclusion 中查看更多信息 ng-content。

不确定术语“结构组件”是否仍然适用或解决我找到的答案。似乎 Projections 是这个 Structural component 术语的正确术语，用于在结构指令指南底部描述的这种行为。

基本上我们可以通过在组件模板中使用<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

Offtopic：我在一个指南中不小心把这个作为这种行为的一个例子（在 Google 上搜索时“angular 2 advanced”）。太糟糕了，这仍然不在官方 Angular 2 指南中（在写答案时）。

在我看来，术语“结构组件”在官方指南中被滥用，不存在，或者在 Google 中搜索并没有给出任何相关结果，而只是这个问题。

【讨论】：