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 装饰器的属性添加适当的视图元数据。