如何在angular2中创建结构组件

2023年12月16日 190次阅读

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

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

Angular offers more sophisticated techniques for managing layout such as structural components that can take external content and incorporate that content within their own templates. Tab and tab pane controls are good examples.
We’ll learn about structural components in a future chapter.

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

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

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

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

最佳答案 TL; DR：

内容投影(旧的称为Angular 1中的Transclusion)似乎通过使用< ng-content>来实现“结构组件”的行为. …< / ng-content>.

>请参阅Rangle的Angular 2上的Projections的解释
培训书.
>在Angular 2中查看更多于toddmotto.com about Transclusion
NG-内容.

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

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

例：

该 组件将项目/转换传递给它的内容：

@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)：

《如何在angular2中创建结构组件》

>请参阅此处https://plnkr.co/edit/5r5vR1?p=preview

Offtopic：我在一个指南中意外地将此作为此行为的一个例子(在Google上搜索“angular 2 advanced”时).太糟糕了,这仍然不在官方的Angular 2指南中(就像写答案时那样).

在我看来,“结构组件”一词在官方指南中被滥用,不存在,或者Google中的搜索没有给出任何相关结果,只是这个问题.

点赞