typescript - typescript 中的@符号是什么意思--Angular 2

Question

我正在使用 typescript 进行 angular 2 应用程序开发。

但是当我们为组件或路由配置或其他一些地方编写代码时 我们使用“@”符号。

我的问题是这个符号是什么意思，为什么需要它？

Answer 1

您所指的 @ 符号称为 decorator。

Decorators provide a way to add both annotations and a meta-programming syntax for class declarations and members.

基本上，当您执行 @component 时，您是在告诉编译器该类是一个 angular2 组件，其元数据作为参数传递。

例如。

@Component({
  moduleId: module.id,
  selector: 'heroes-app',
  templateUrl: 'heroes.component.html',
  styleUrls: ['heroes.component.css'],  
})
class HeroesComponent{}

这段代码会告诉编译器类 HeroesComponent 应该是一个带有元数据作为参数传递的 angular2 组件，它会创建一个组件类。

Decorator 不是魔法。这只是函数调用。

例如。

@Component({
selector: 'static-component',
template: `<p>Static Component</p>`
})
class StaticComponent {}

相当于:

class DynamicComponent {
}

const dynamicComponent = Component({
    selector: 'dynamic-component',
    template: `<p>Dynamic Component</p>`
})(DynamicComponent);

希望这对您有所帮助。