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

Question

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

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

Answer 1

您可以将任何组件视为带有视图的指令。

后果

基于只有组件有视图的事实，有几个后果，例如：

• 只有组件可以定义 directives 以用于组件本身及其作为根的整个子树。
• 只有组件可以定义 pipes 用于组件及其根的整个子树。
• 只有组件可以定义 viewEncapsulation，因为它们可以有视图，这与指令相反
• 当框架为给定组件创建 ElementInjector 时，它将被标记为 Host 注入器。
• 将为组件创建单独的变更检测器实例（并且分别只有组件可以定义变更检测策略）。

更多详情

Angular2中定义组件的经典方式是：

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

@View 装饰器帮助您为给定组件定义视图。最初它是在一个单独的装饰器中外部化的（就像上面的例子一样），因为 Angular 团队计划允许单个组件具有多个视图定义（一个用于组件将要运行的每个平台）。 最近这个装饰器被删除了，所以目前你可以定义一个组件：

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

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