Angular 2 中有哪些指令？答案

【问题标题】：What directives do in Angular 2?Angular 2 中有哪些指令？
【发布时间】：2016-05-18 09:47:14
【问题描述】：

我不明白这两个 @Directive 和指令之间的区别：[HeroAppMainComponent] 在下面这种情况下

 @Component({
      selector: 'hero-app',
      template: `
        <h1>Tour of Heroes</h1>
        <hero-app-main [hero]=hero></hero-app-main>`,
      styles: ['h1 { font-weight: normal; }'],
      directives: [HeroAppMainComponent]
    })

和..

import { Directive, ElementRef, Input } from '@angular/core';
@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}

【问题讨论】：

标签： typescript angular angular2-directives

【解决方案1】：

简而言之，指令没有模板，而组件有。有几种指令类型：

属性指令：旨在改变 DOM 元素的外观或行为。有关详细信息，请参阅此页面：https://angular.io/docs/ts/latest/guide/attribute-directives.html。
结构指令：通过添加和删除 DOM 元素来更改 DOM 布局。它们依赖于模板元素作为输入，并且可以使用语法快捷方式/糖来使用它们。有关详细信息，请参阅此页面：https://angular.io/docs/ts/latest/guide/structural-directives.html

【讨论】：

【解决方案2】：

实际上指令在 Angular 2 中仍然存在。组件只是指令中最重要的类型，但不是唯一的。组件是带有模板的指令。但是您仍然可以编写没有模板的装饰器样式指令。在这里，我们没有像 Angular 1 中那样的 .directive 函数，而是有简单的类，这些类被注释以赋予它们特定的行为。导入组件的注解是：

import {Component} from 'angular2/core';

【讨论】：