角度上的装饰器和指令有什么区别？

Question

我对 Angular 中的指令和装饰器很困惑。我认为任何以 @ 为前缀的东西都是装饰器，现在当我读到指令时它说，组件是指令。这是怎么回事？对此事的任何澄清都会有所帮助。

Answer 1

角度指令和装饰器

\n

装饰者：

\n

\n

装饰器是一种特殊类型的声明，\n可以附加到类声明、方法、访问器、属性或参数。\n装饰器使用@表达式形式，其中表达式必须计算为\n将在运行时调用的函数有关修饰声明的\n信息。

\n

\n

下面是 TypeScript 文档中名为 seal 的装饰器示例：

\n

function sealed(constructor: Function) { \nObject.seal(constructor); \nObject.seal(constructor.prototype); \n}\n

\n

您会注意到它采用构造函数作为参数。它可以在类上使用，如下所示：

\n

@sealed class Greeter { \n  greeting: string; \n  constructor(message: string) { \n    this.greeting = message; \n  } \n  greet() { \n    return \xe2\x80\x9cHello, \xe2\x80\x9c + this.greeting; \n  } \n}\n

\n

指令：

\n

\n

Angular Directive 基本上是一个带有 @Directive 装饰器的类。组件也是带有模板的指令。@Component 装饰器实际上是一个扩展了面向模板功能的 @Directive 装饰器。每当 Angular 渲染指令时，它都会根据指令给出的指令更改 DOM。该指令\n出现在与属性类似的元素标记内。

\n

\n

Angular 指令可以分为两种类型：结构指令和属性指令。

\n

结构指令通过添加、删除和替换 DOM 中的元素来改变布局。\n属性指令改变现有元素的外观或行为。当您在模板中包含属性指令时，它们看起来就像常规的 HTML 属性。实现双向数据绑定的 ngModel 指令是属性指令的一个示例。ngModel 通过设置现有元素的显示属性并响应更改事件来修改现有元素的行为。

\n

请注意，我们如何在 Angular 组件内部使用 ngModel 指令？

\n

 <label for="example-ngModel">[(ngModel)]:</label>\n<input [(ngModel)]="currentItem.name" id="example-ngModel">\n

\n