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

Question

我对Angular中的指示符和装饰符感到非常困惑。我认为任何以@为前缀的东西都是装饰器，现在当我读到指令时，它说，Component是一个指令。这是怎么回事？对此事的任何澄清都将是有益的。

Answer 1

装饰

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

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

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

@Input（）decorator与类的属性一起使用，它允许父组件将任何数据发送给子组件。

@Input() parentProperty: any;

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

Directives = @Directive + TypeScript Class

一个例子是演示指令。

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

此指令可以在任何 HTML 元素中使用，使用选择器名称。要使用指令，可以简单地将其合并到HTML元素中。这是如何使用：

<div demo>HELLO</div> 

Answer 2

角度指令

装饰师：

装饰器是一种特殊的声明，可以附加到类声明、方法、访问器、属性或参数上。Decorators使用@expression形式，其中expression必须计算出一个函数，该函数将在运行时使用被修饰声明的信息进行调用。

下面是来自 TypeScript 文档的一个示例装饰器，称为 sealed：

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修饰符的类。组件也是带有模板的指令。@Component修饰符实际上是一个@Directive修饰符，扩展了面向模板的特性。每当Angular渲染一个指令时，它都会根据该指令给出的指令更改DOM。该指令出现在与属性类似的元素标记中。

角度指令可以分为两种类型:结构指令和属性指令。

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

注意当定义一个角度分量时，我们是如何使用@component指令的？

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

Answer 3

指示

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

> < Li > < p > https://angular . io/guide/attribute-指令

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

装饰师

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

我们可以说< code > decorator 是函数，并且有四个东西(类、参数、方法和属性)可以被修饰，这将遵循每个不同的函数签名。

>

这是一个很好的例子https://angular-2-training-book.rangle.io/features/typescript/decorators

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