Angular 2中组件和指令有什么区别？

Question

我一直在努力理解框架中这两个概念之间的区别.

我非常熟悉AngularJS 1.x中的指令,Angular 2中的组件和指令似乎与此概念非常相似......

Answer 1

您可以将任何组件视为具有视图的指令.

后果

基于只有组件具有视图的事实,会产生一些后果,例如:

• 只有组件可以定义directives在组件本身和整个子树中使用它.
• 只有组件可以定义pipes在组件中使用,并且整个子树都是它的根.
• 只有组件可以定义,viewEncapsulation因为它们可以具有视图,与指令相反
• 当框架ElementInjector为给定组件创建时,它将被标记为Host注入器.
• 将仅为组件创建变化检测器的单独实例(并且分别仅组件可以定义变化检测策略).

更多详情

在Angular 2中定义组件的经典方法是:

@Component({
  selector: '...',
  // ...
})
@View({
  template: '...'
})
class ComponentCtrl {...}

该@View装饰帮助您确定给定分量的图.最初它是在一个单独的装饰器中外部化的(就像上面的例子一样),因为Angular团队计划允许单个组件具有多个视图定义(组件将要处理的每个平台一个).最近这个装饰器被删除了,所以目前你可以定义一个组件:

@Component({
  selector: '...',
  template: '...',
  //...
})
class ComponentCtrl {...}

这样您可以获得相同的结果,但输入的次数会少一些.内部Angular 2将根据您为@Component装饰器设置的属性添加适当的视图元数据.