An in-depth analysis of class decorators in Angular

本篇文章带大家了解一下Angular中的5种类（class）装饰器，希望对大家有所帮助！

angular共有5种类装饰器，表明每个类的用途，angular用何种方式解析它。

• NgModule: 标明是一个模块
• Component：标明是一个组件
• Directive： 标明是一个指令
• Injectable： 标明是一个服务
• Pipe： 标明是一个管道

1. NgModule

把一个类标记为模块，并可以在这个类中配置这个模块中用到的数据。【相关教程推荐：《angular教程》】

它支持做如下配置：(下同)

1.1 imports

导入本模块需要用到的模块，注意懒加载的模块不能导入，否则懒加载就没有作用了。

1.2.  declarations: Array

声明组件、指令、管道，这三个统称为可申明对象。

1.3. providers: []

注册服务

1.4 exports: Array

其他模块若想使用本模块的组件、指令或管道，则需要将其抛出去。

为啥要抛出去？angular规定可声明对象应该且只能属于一个 NgModule。

1.5 entryComponents: []

告诉 Angular 哪些是动态组件，Angular 都会为其创建一个 ComponentFactory，并将其保存到 ComponentFactoryResolver 中。

若要写一个动态组件不仅要在这里加，还需要在declarations中申明。

1.6 bootstrap：Array

当该模块引导时需要进行引导的组件。列在这里的所有组件都会自动添加到 entryComponents 中。即路由链接到该模块时默认显示的组件。

1.7 schemas: Array

该 NgModule 中允许使用的声明元素的 schema（HTML 架构）。 元素和属性（无论是 Angular 组件还是指令）都必须声明在 schema 中。

1.8 id: string

当前 NgModule 在 getModuleFactory 中的名字或唯一标识符。 如果为 undefined，则该模块不会被注册进 getModuleFactory 中。

1.9 jit: true

如果为 true，则该模块将会被 AOT 编译器忽略，因此始终会使用 JIT 编译。

2. Component

一个装饰器，用于把某个类标记为 Angular 组件，并为它配置一些元数据，以决定该组件在运行期间该如何处理、实例化和使用。 组件是特殊的指令，它的一部分属性继承自 Directive 装饰器。

2.1 selector: string

css选择器名称, 可以是标签名、属性、class等，一般都是以标签来命名，具体见指令选择器部分。

如selector: 'mo-dir'在html中使用为 <mo-dir></mo-dir>
也可以使用属性来定义, 如selector: '[mo-dir]'在html中使用为 <div mo-dir></div>

2.2 template： string、templateUrl：string

这两个同时只能用1个

• template 是直接写的html字符串，如<div>我是html内容</div>
• templateUrl is the html file path address

2.3 styles, styleUrls

• styles is directly written css Style
• styleUrls is the css file path address

2.4 animations

One or more animation trigger() calls, including some state( ) and transition() definition.

2.5 providers

Services can be registered here and used

2.6 changeDetection

Specifies the change detection strategy for the current component.

2.7 inputs: string[]

The parameters passed in by the component are equivalent to @Input. The difference from @Input is that it is an array.

@Component({
  selector: 'mo-dir',
  inputs: [id: 123],
  template: `
   {{ id }}
  `
})
class BankAccount {
  id: number;
}

The content in inputs indicates that there is an id attribute, and the default value is 123. Equivalent to @Input id: number = 123.

2.8 outputs: string[]

event output, equivalent to @Output, different from @Output It is an array.

@Component({
  selector: 'mo-dir',
  outputs: [ 'idChange' ]
})
class ChildDir {
 idChange: EventEmitter<string> = new EventEmitter<string>();
}

is equivalent to @output idChange: EventEmitter<string> = new EventEmitter<string>();.

3. Directive

##3.1 selector: string

It is a css selector used to mark in templates Exits the instruction and triggers the instantiation of the instruction. You can use one of the following forms

Element name or tag name

@Directive({
  selector: 'mo',
})

<mo></mo>

class

@Directive({
  selector: '.mo',
})

<div class=".mo"></div>

Attribute name

@Directive({
  selector: '[mo]',
})

<div mo></div>

Attribute name = attribute value

@Directive({
  selector: '[type=text]',
})

<input type="text"></div>

Does not contain a selector

For example, matching attributes

moBut does not contain class.foo

@Directive({
  selector: 'div[mo]:not(.foo)',
})

<div mo></div>

The first of the above instructions will not be matched, but the second one will be matched.

Just match one of the multiple ones

You can write multiple ones at the same time. If one of them matches, just use commas to separate them.

@Directive({
  selector: '.foo, .bar',
})

<div class="foo"></div>
<div class="bar></div>
<div class="foo bar"></div>

The above three instructions will be added.

3.2 inputs, outputs: string[]

Same component

3.3 providers

will serve Inject it in using

3.4 exportAs: string

Take Advantage of the exportAs Property in Angular：

https://netbasal.com /angular-2-take-advantage-of-the-exportas-property-81374ce24d26

Throw the instruction as a variable for external use.

For example, write an instruction to modify the text color

@Directive({
 selector: '[changeColor]',
 exportAs: 'changeColor'
})
class ChangeColorDirective {
    
    toggleColor() {
        // 修改颜色的逻辑
    }
}

<p changeColor #changeColorRef="changeColor"></p>

<button (click)="changeColorRef.toggleColor()"></button>

The instruction obtains the p element through the attribute

[changeColor], and then uses exportAs to export the instruction It is thrown out with the changeColor variable, and the instruction instance is received as #changeColorRef in the html template. At this time, the content in this instruction can be used.

3.5 queries, host, jit

The official website explains it very clearly:

queries: https://angular.cn/api /core/Directive#queries
host：https://angular.cn/api/core/Directive#host
jit：https://angular.cn/api/core/Directive #jit

4. Injectable

Injectable：

https://angular.cn/api/core/Injectable

@Injectable({
  providedIn: 'root',
})

'root': Application-level injector in most applications.
'platform': A special singleton platform injector shared by all applications on the page.
'any': Provide a unique instance in every module in which the token is injected (including lazy modules).

5. pipe

The function of the pipe is data conversion.

5.1 name: string

Pipe name

5.2 pure: boolean

true : Pure pipeline, the transform method will only be called when the input parameters change
false: The pipeline will be called once in each change detection cycle - even if its parameters have not changed.

Customize a pipeline:

Pass the name and id into the pipeline for processing

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'mo',
})
export class MoPipe implements PipeTransform {
  transform(name: string, id: number): any {
    // 对传进来的数组进行处理，再return出去
  }
}

@Component({
  selector: 'mo-dir',
  template: `
    <p>   {{ name | mo: id }} </span>
  `
})
class BankAccount {
    name: string = "deepthan"
    id:   number = 1;
}

More usage updates on github:

https://github.com/deepthan/blog-angular

For more programming related knowledge, please visit:

Programming Video! !

The above is the detailed content of An in-depth analysis of class decorators in Angular. For more information, please follow other related articles on the PHP Chinese website!