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

Question

<分区>

Answer 1

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

后果

基于只有组件有 View 的事实，有几个后果，例如:

• 只有组件可以定义指令以用于组件本身和它作为根的整个子树。
• 只有组件可以定义要在组件中使用的管道以及它作为根的整个子树。
• 只有组件可以定义viewEncapsulation，因为它们可以有 View ，这与指令相反
• 当框架为给定组件创建一个 ElementInjector 时，它将被标记为一个 Host 注入(inject)器。
• 将仅为组件创建一个单独的变更检测器实例(并且分别只有组件可以定义变更检测策略)。

更多详情

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

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

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

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

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