本篇文章带大家了解一下Angular中的5种类（class）装饰器，希望对大家有所帮助！
angular共有5种类装饰器，表明每个类的用途，angular用何种方式解析它。
NgModule: 标明是一个模块Component：标明是一个组件Directive： 标明是一个指令Injectable： 标明是一个服务Pipe： 标明是一个管道NgModule把一个类标记为模块，并可以在这个类中配置这个模块中用到的数据。【相关教程推荐：《angular教程》】
它支持做如下配置：(下同)
导入本模块需要用到的模块，注意懒加载的模块不能导入，否则懒加载就没有作用了。
声明组件、指令、管道，这三个统称为可申明对象。
注册服务
其他模块若想使用本模块的组件、指令或管道，则需要将其抛出去。
为啥要抛出去？angular规定可声明对象应该且只能属于一个 NgModule。
告诉 Angular 哪些是动态组件，Angular 都会为其创建一个 ComponentFactory，并将其保存到 ComponentFactoryResolver 中。
若要写一个动态组件不仅要在这里加，还需要在declarations中申明。
当该模块引导时需要进行引导的组件。列在这里的所有组件都会自动添加到 entryComponents 中。即路由链接到该模块时默认显示的组件。
该 NgModule 中允许使用的声明元素的 schema（HTML 架构）。 元素和属性（无论是 Angular 组件还是指令）都必须声明在 schema 中。
当前 NgModule 在 getModuleFactory 中的名字或唯一标识符。 如果为 undefined，则该模块不会被注册进 getModuleFactory 中。
如果为 true，则该模块将会被 AOT 编译器忽略，因此始终会使用 JIT 编译。
一个装饰器，用于把某个类标记为 Angular 组件，并为它配置一些元数据，以决定该组件在运行期间该如何处理、实例化和使用。 组件是特殊的指令，它的一部分属性继承自 Directive 装饰器。
css选择器名称, 可以是标签名、属性、class等，一般都是以标签来命名，具体见指令选择器部分。
如selector: 'mo-dir'在html中使用为 <mo-dir></mo-dir>
也可以使用属性来定义, 如selector: '[mo-dir]'在html中使用为 <div mo-dir></div>
这两个同时只能用1个
<div>我是html内容</div>
一個或多個動畫trigger() 調用，包含一些state( ) 和transition() 定義。
服務可以在這裡面註冊就可以使用了
#指定目前組件的變更偵測策略。
元件傳入的參數，相當於@Input。和@Input不同的是它是一個陣列。
@Component({
selector: 'mo-dir',
inputs: [id: 123],
template: `
{{ id }}
`
})
class BankAccount {
id: number;
}inputs中的內容表示有個id屬性，預設值是123。相當於@Input id: number = 123。
事件輸出，相當於@Output，和@Output不同的是它是一個陣列。
@Component({
selector: 'mo-dir',
outputs: [ 'idChange' ]
})
class ChildDir {
idChange: EventEmitter<string> = new EventEmitter<string>();
}相當於@output idChange: EventEmitter<string> = new EventEmitter<string>();。
它是一個css選擇器， 用來在範本中標記出該指令，並觸發該指令的實例化。可使用下列形式之一
@Directive({
selector: 'mo',
})<mo></mo>
@Directive({
selector: '.mo',
})<div class=".mo"></div>
@Directive({
selector: '[mo]',
})<div mo></div>
@Directive({
selector: '[type=text]',
})<input type="text"></div>
例如符合有屬性mo但是不包含class.foo
@Directive({
selector: 'div[mo]:not(.foo)',
})<div mo></div>
上述指令第一個不會被比對到，第二個會被比對到。
可以同時寫多個，如果配對到其中一個即可，使用逗號隔開。
@Directive({
selector: '.foo, .bar',
})<div class="foo"></div> <div class="bar></div> <div class="foo bar"></div>
上述三個都會被加入指令。
#相同元件
#將服務注入進來使用
Take Advantage of the exportAs Property in Angular：
https://netbasal.com /angular-2-take-advantage-of-the-exportas-property-81374ce24d26
把指令以一個變數拋出去，供外部使用。
例如寫了一個指令來修改文字顏色
@Directive({
selector: '[changeColor]',
exportAs: 'changeColor'
})
class ChangeColorDirective {
toggleColor() {
// 修改颜色的逻辑
}
}<p changeColor #changeColorRef="changeColor"></p> <button (click)="changeColorRef.toggleColor()"></button>
指令透過屬性[changeColor]取得到了p元素，之後透過exportAs把指令以changeColor變數拋了出去, 在html模板中以#changeColorRef接收指令實例，這時就可以用這個指令裡的內容了。
官網講得挺清楚：
#Injectable：
https://angular.cn/api/core/Injectable
@Injectable({
providedIn: 'root',
})管道的作用是資料轉換。
管道名稱
自訂一個管道：
把名字和id傳入到管道進行處理
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;
}更多用法更新於 github：
https://github.com/deepthan/blog-angular
更多程式相關知識，請造訪：程式設計影片！ ！
以上是深入淺析Angular中的類別（class）裝飾器的詳細內容。更多資訊請關注PHP中文網其他相關文章！
