Angular 2指令语法[重复]

Posted 2023-02-22

【中文标题】Angular 2指令语法[重复]

【英文标题】：Angular 2 Directive Syntax [duplicate]

【发布时间】：2016-06-28 03:43:18

【问题描述】：

有人可以从外部模板（未在组件装饰器中内联声明）澄清此语法（特别是 *mycomponent）：

<my-component *mycomponent><my-component>

这只是将组件注入外部 html 视图/模板的一种简写方式吗？基本上，我问的是它是否相当于在下面的内联模板中注入“SubComponent”指令：

@Component(
  selector: 'my-component',
  directives: [SubComponent],
  template: `
    ...
  `
) 

【问题讨论】：

您可以阅读the docs 以了解该语法

谢谢！我正在寻找那个。感谢您的帮助！

【参考方案1】：

实际上 * 字符是应用结构指令的方式，是以下内容的快捷方式：

<template mycomponent>
  <my-component></my-component>
</template>

要应用此指令，您需要使用要使用它的组件的指令属性来定义它...

这样的指令将以这种方式实现。查看 NgIf 的示例：

https://github.com/angular/angular/blob/master/modules/angular2/src/common/directives/ng_if.ts

具体的是可以注入对应的 TemplateRef 和 ViewContainerRef 来管理关联模板的内容。在 NgIf 指令的上下文中，它只是在 DOM 中呈现或不呈现此内容。

有关结构指令的更多详细信息，请参阅此 Soc：

https://angular.io/docs/ts/latest/guide/structural-directives.html

【讨论】：

同样的手提箱对我不起作用不知道为什么请看这个plnkr.co/edit/8HRA3bM0NxXrzBAjWYXc?p=preview