angular 中的装饰器和指令有什么区别？

Question

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

Answer 1

指令

Directives are the building blocks of Angular applications.

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

装饰器

Decorator that marks a class as an Angular component and provides configuration metadata that determines how the component should be processed, instantiated, and used at runtime.

Decorators 是使用前缀 @ 符号调用的函数，紧接着是class、参数、方法或属性。装饰器函数提供有关 class、参数或方法的信息。

我们可以说Decorators是函数，有四个东西（class、参数、方法和属性）可以修饰，每个不同的函数都会跟着修饰签名。

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

Answer 2

Angular 指令和装饰器

装饰器：

A Decorator is a special kind of declaration that can be attached to a class declaration, method, accessor, property, or parameter. Decorators use the form @expression, where expression must evaluate to a function that will be called at runtime with information about the decorated declaration.

这是 TypeScript 文档中名为 sealed 的装饰器示例：

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

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

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

指令：

Angular Directive is basically a class with a @Directive decorator. A component is also a directive-with-a-template. A @Component decorator is actually a @Directive decorator extended with template-oriented features. Whenever Angular renders a directive, it changes the DOM according to the instructions given by the directive. The directive appears within an element tag similar to attributes.

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

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

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

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

Answer 3

装饰器

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

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

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

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

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

@Input() parentProperty: any;

指令

指令只是 TypeScipt Class，它具有 @Directive 装饰器。简单来说：

Directives = @Directive + TypeScript Class

一个例子是演示指令。

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

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

<div demo>HELLO</div>

angular 中的装饰器和指令有什么区别？

What is the difference between a Decorator and Directive in angular?

angular-decorator

angular-directive

angular