如何在angular2中创建结构组件

Question

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

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

  

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

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

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

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

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

Answer 1

TL; DR：

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

• 请参阅Rangle的Angular 2中Projections的解释 培训书。
• 在Angular 2中的toddmotto.com about Transclusion中查看更多内容 ng-content。

不确定术语“结构组件”是否仍然适用或解析为我找到的答案。 似乎预测是结构指令指南底部描述的此行为的结构组件术语的正确术语。

基本上我们可以通过在组件模板中使用<ng-content>...</ng-content>指令标记来实现这一点。该组件将在Component的元素标签内显示或“投射”这些内容（因此，如果我在这里正确应用该术语，则充当结构组件）。

实施例

此<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指南中（就像写答案时那样）。

在我看来，“Structural component”这个词在官方指南中被滥用，不存在，或者Google中的搜索没有给出任何相关结果，只是这个问题。