Angular中的類裝飾器有哪些

這篇文章主要介紹了Angular中的類裝飾器有哪些，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

angular共有5種類裝飾器，表明每個類的用途，angular用何種方式解析它。

• NgModule: 標明是一個模塊

• Component：標明是一個組件

• Directive： 標明是一個指令

• Injectable： 標明是一個服務

• Pipe： 標明是一個管道

1. NgModule

把一個類標記為模塊，并可以在這個類中配置這個模塊中用到的數據。【相關教程推薦：《angular教程》】

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

1.1 imports

導入本模塊需要用到的模塊，注意懶加載的模塊不能導入，否則懶加載就沒有作用了。

1.2.  declarations: Array<Type | any[]>

聲明組件、指令、管道，這三個統稱為可申明對象。

1.3. providers: []

注冊服務

1.4 exports: Array<Type | any[]>

其他模塊若想使用本模塊的組件、指令或管道，則需要將其拋出去。

為啥要拋出去？angular規定可聲明對象應該且只能屬于一個 NgModule。

1.5 entryComponents: []

告訴 Angular 哪些是動態組件，Angular 都會為其創建一個 ComponentFactory，并將其保存到 ComponentFactoryResolver 中。

若要寫一個動態組件不僅要在這里加，還需要在declarations中申明。

1.6 bootstrap：Array<Type | any[]>

當該模塊引導時需要進行引導的組件。列在這里的所有組件都會自動添加到 entryComponents 中。即路由鏈接到該模塊時默認顯示的組件。

1.7 schemas: Array<SchemaMetadata | any[]>

該 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 是html文件路徑地址

2.3 styles、styleUrls

• styles 是直接寫的css樣式

• styleUrls 是css文件路徑地址

2.4 animations

一個或多個動畫 trigger() 調用，包含一些 state() 和 transition() 定義。

2.5 providers

服務可以在這里面注冊就可以使用了

2.6 changeDetection

指定當前組件的變更檢測策略。

2.7 inputs： string[]

組件傳入的參數，相當于@Input。和@Input不同的是它是一個數組。

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

inputs中的內容表示有個id屬性，默認值是123。相當于@Input id: number = 123。

2.8 outputs：string[]

事件輸出，相當于@Output，和@Output不同的是它是一個數組。

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

相當于@output idChange: EventEmitter<string> = new EventEmitter<string>();。

3. Directive

3.1 selector： string

它是一個css選擇器， 用于在模板中標記出該指令，并觸發該指令的實例化。可使用下列形式之一

• 元素名或標簽名

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

<mo></mo>

• class

@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 class="foo"></div>

<div mo></div>

上述指令第一個不會被匹配到，第二個會被匹配到。

• 匹配多個中的一個即可

可以同時寫多個，如果匹配到其中一個即可，使用逗號隔開。

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

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

上述三個均會被添加上指令。

3.2 inputs、outputs: string[]

同組件

3.3 providers

將服務注入進來使用

3.4 exportAs: string

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接收指令實例，這時就可以用這個指令里的內容了。

3.5 queries、host、jit

官網講得挺清楚：

• 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'：大多數應用程序中的應用程序級注入器。

• '平臺'：頁面上所有應用程序共享的特殊單例平臺注入器。

• 'any'：在每個注入令牌的模塊（包括惰性模塊）中提供唯一的實例。

5. pipe

管道的作用是數據轉換。

5.1 name: string

管道名稱

5.2 pure: boolean

• true: 純管道，transform方法只有在輸入參數變化時參數會被調用

• false: 該管道會在每個變更檢測周期中都被調用一次 —— 即使其參數沒有發生任何變化。

自定義一個管道：

把名字和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;
}

感謝你能夠認真閱讀完這篇文章，希望小編分享的“Angular中的類裝飾器有哪些”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!