为什么Angular 2使用装饰器？

Question

我刚刚开始使用Angular 2，并且想知道为什么像selector和template这样的属性被放在组件装饰器中而不是组件类中。

在Angular 2中使用所有这些装饰器有什么意义？

Answer 1

除了已经存在的特定于平台的答案之外，我还希望从更通用的视角中获取。从我的观点来看，这个问题与选择装饰模式而不是继承的决定有关（例如@Component vs extends Component）

使用装饰器的一些好处是：

<强> 1。关注点分离：

装饰器内部的信息是声明性的，它们定义了类的行为，很可能不会随着时间的推移而改变并被框架使用。类属性和字段是特定于类的数据，将始终处理和频繁更新，并且只在类本身内有意义。这两种数据不应混合在一起。

<强> 2。支持多项修改

由于Diamond problem，许多语言都会阻止多重继承。另一方面，一个类可以有多个装饰器用于不同的目的（例如@Component和不推荐的@RouteConfig）

Answer 2

• 使工具可以轻松地在以下模板中提供各种支持：

  • 错误检查
  • 自动完成
  • 图形用户界面设计师

• 从装饰器生成代码，允许：

  • 以声明方式定义某些内容或
  • 根据某些配置生成不同的代码（例如即将推出的离线模板编译器）

需要执行代码才能使用结果表达式可能会发出。可以在不执行TypeScript代码的情况下静态地评估装饰器（除了可能是简单且有限的子集）。

Answer 3

通常，装饰器允许您执行函数。例如@Component执行从Angular2导入的Component函数。在引擎盖下，这样的装饰器在类上定义了一些元数据。这允许您将类配置为＆＃34;标记＆＃34;它作为一个组成部分。然后，Angular2能够将模板中的选择器链接到这样的类。

本文可以为您提供更多关于幕后内容的提示：

• https://medium.com/@ttemplier/angular2-decorators-and-class-inheritance-905921dbd1b7#.ryvc6ewsc

您可以注意到装饰器可以在不同级别的TypeScript中应用（类，类属性，方法参数）。

Answer 4

在角度上，我们为所有组件（如组件，服务，指令，

）创建类

那么，角度编译器如何编译您的代码并将其转换为可在浏览器中运行的脚本？这是由于装饰器而发生的。简而言之，可以说装饰器使您可以将Typescript类附加元数据，从而使angular知道该类是组件，指令还是模块等。

Answer 5

Decorator 将一个类标记为一个 Angular 组件，并提供确定组件在运行时应该如何处理、实例化和使用的配置。它提供了各种选项来配置它，例如选择器、templateUrl、模板、styleUrls、样式、提供程序等。