在TypeScript - Angular 2中，“@”符号的含义是什么？

Question

我正在使用TypeScript进行Angular 2应用程序开发。

但是，当我们为组件、路由配置或其他地方编写代码时，我们会使用"@"符号。

我的问题是这个符号代表什么，为什么需要使用它？

- Pankaj Badukale

Answer 1

你所提到的@符号被称为装饰器。

装饰器为类声明和成员提供了添加注解和元编程语法的方法。

基本上，当你使用@component时，你告诉编译器该类是一个带有传递参数的 Angular2 组件元数据。

例如：

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

这段代码会告诉编译器HeroesComponent类应该作为一个Angular2组件传入元数据并创建一个组件类。

装饰器不是魔法，它只是函数调用。

例如：

@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);

希望这能有所帮助。

- Bhushan Gadekar

---

关于你的“等价示例”：你是说这个修饰符真的将“静态”的变成了“动态”的，还是这只是示例中的不一致性？ - bluenote10

@bluenote10 这只是我个人的命名错误。 - Bhushan Gadekar

Answer 2

这意味着您正在应用装饰器。

随着TypeScript和ES6引入了类，现在存在某些场景需要额外的功能来支持注释或修改类和类成员。 装饰器为类声明和成员提供了一种添加注释和元编程语法的方式。 装饰器是JavaScript的第一阶段提案，并作为TypeScript的实验性功能提供。

• 如何实现typescript装饰器？
• https://www.typescriptlang.org/docs/handbook/decorators.html

- Günter Zöchbauer

---

我已经阅读了@Gunter提供的参考链接，并发现它只是一些在运行时注入实际代码的代码......但是为了注入它，我们使用以@符号开头的函数名称，这样Typescript就会理解它是装饰器，并且在转换或以后应该注意它。如果我有错误，请纠正我。 - Pankaj Badukale

装饰器可以静态解释（不实际运行代码）。Angular 使用此功能在构建时生成代码（离线模板编译器），并用于工具支持，如模板中的自动完成（两者都在进行中）。 - Günter Zöchbauer

利用这个问题，他们为什么也决定在他们的npm包上加上'@'符号呢？例如：import "@angular/core" 等等... - weisk

据我所知，这是一个 NPM 的特性，并创建了一个保留的命名空间，只有 Angular 团队可以发布包。 - Günter Zöchbauer