装饰器和指令在角度上有啥区别？

Posted 2023-02-22

【中文标题】装饰器和指令在角度上有啥区别？

【英文标题】：What is the difference between a Decorator and Directive in angular?装饰器和指令在角度上有什么区别？

【发布时间】：2020-01-10 21:03:17

【问题描述】：

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

【问题讨论】：

@Directive v/s @Component in Angular的可能重复

那里有很多教程。你的帖子太宽泛了，所以

【参考方案1】：

指令

指令是 Angular 应用程序的构建块。

Angular 组件只不过是一个directive 和一个template。当我们说组件是 Angular 应用程序的 building blocks 时，

https://angular.io/guide/attribute-directives

https://www.sitepoint.com/practical-guide-angular-directives/

装饰器

将类标记为 Angular 组件并提供配置元数据的装饰器，用于确定组件在运行时应如何处理、实例化和使用。

Decorators 是使用前缀 @ 符号调用的函数，其后紧跟一个类、参数、方法或属性。装饰器函数提供有关类、参数或方法的信息。

我们可以说Decorators是函数，有四种东西（类、参数、方法和属性）可以被装饰，它们会跟随每个不同的函数签名。

有一些不错的博客，您可以阅读它们以获取更多信息...

https://angular-2-training-book.rangle.io/features/typescript/decorators

https://codecraft.tv/courses/angular/es6-typescript/decorators/

【参考方案2】：

Angular 指令和装饰器

装饰者：

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

这是来自 TypeScript 文档的示例装饰器，称为 seal：

function sealed(constructor: Function)  
Object.seal(constructor); 
Object.seal(constructor.prototype); 

你会注意到它需要一个构造函数作为参数。它可以用在一个类上，如下所示：

@sealed class Greeter  
  greeting: string; 
  constructor(message: string)  
    this.greeting = message; 
   
  greet()  
    return “Hello, “ + this.greeting; 
   

指令：

Angular Directive 基本上是一个带有 @Directive 装饰器的类。一种 组件也是一个带有模板的指令。 @Component 装饰器 实际上是一个 @Directive 装饰器扩展了面向模板 特征。每当 Angular 渲染一个指令时，它都会改变 DOM 根据指令给出的说明。该指令 出现在类似于属性的元素标签内。

Angular 指令可以分为两种类型：structural 和 attribute directives。

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

注意在定义 Angular 组件时我们如何使用 @component 指令？

@Component(
  selector: ‘main’,
  template: `<child-dir #c=”child”></child-dir>`
)
class MainComponent  .. 

【参考方案3】：

装饰器

装饰器只是增强类或属性或方法的 Angular 函数。它们将配置元数据作为输入并在运行时处理类或属性或方法。它们以@符号为前缀。

两个例子是@Componet() 装饰器和@Input() 装饰器。

@Componet 装饰器与 TypeScript 类一起使用，它们将类转换为 Angular 组件。

@Component(
  selector: 'any-app',
  templateUrl: './template-path.html',
  stylesUrls: ['./styles.css']
)
export class AnyAppComponent 

@Input() 装饰器与类的属性一起使用，它允许父组件向子组件发送任何数据。

@Input() parentProperty: any;

指令

指令只是具有@Directive 装饰器的 TypeScipt 类。简单来说：

Directives = @Decorative + TypeScript Class

一个例子是演示指令。

@Directive(
    selector:  '[demo]'
)
export class DemoDirective 

该指令可以在任何使用选择器名称的 HTML 元素中使用。要使用指令，可以简单地将其合并到 HTML 元素中。使用方法如下：

<div demo>HELLO</div>