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