@angular裝飾器總結

類裝飾

裝飾NgModule

@NgModule({ 
  providers?: Provider[]
  declarations?: Array<Type<any> | any[]>
  imports?: Array<Type<any> | ModuleWithProviders | any[]>
  exports?: Array<Type<any> | any[]>
  entryComponents?: Array<Type<any> | any[]>
  bootstrap?: Array<Type<any> | any[]>
  schemas?: Array<SchemaMetadata | any[]>
  id?: string
})
複製代碼

裝飾Component

@Component({ 
  changeDetection?: ChangeDetectionStrategy
  viewProviders?: Provider[]
  moduleId?: string
  templateUrl?: string
  template?: string
  styleUrls?: string[]
  styles?: string[]
  animations?: any[]
  encapsulation?: ViewEncapsulation
  interpolation?: [string, string]
  entryComponents?: Array<Type<any> | any[]>
  preserveWhitespaces?: boolean
  selector?: string
  inputs?: string[]
  outputs?: string[]
  host?: {...}
  providers?: Provider[]
  exportAs?: string
  queries?: {...}
})
複製代碼

裝飾Directive

@Directive({ 
  selector?: string
  inputs?: string[]
  outputs?: string[]
  host?: {...}
  providers?: Provider[]
  exportAs?: string
  queries?: {...}
})
複製代碼

裝飾Pipe

@Pipe({ 
  name: string
  pure?: boolean
})
複製代碼

裝飾 Injectable

@Injectable({ 
  providedIn?: Type<any> | 'root' | null
  factory: () => any
})
複製代碼

屬性裝飾

• 屬性獲取

@Attribute({ 
  attributeName?: string
})
複製代碼

• 宿主綁定

@HostBinding({ 
  hostPropertyName?: string
})
複製代碼

• 宿主事件綁定

@HostListener({ 
  eventName?: string
  args?: string[]
})
複製代碼

• 輸入

@Input({ 
  bindingPropertyName?: string
})
複製代碼

• 輸出

@Output({ 
  bindingPropertyName?: string
})
複製代碼

• 單個內容查詢

@ContentChild()
複製代碼

• 多個內容查詢

@ContentChildren()
複製代碼

• 單個視圖查詢

@ViewChild()
複製代碼

• 多個視圖查詢

@ViewChildren()
複製代碼

參數裝飾

• 順序檢索

@Host()
複製代碼

• 可空不報錯，檢索不到時爲null

@Optional()
複製代碼

• 只在自己檢索

@Self()
複製代碼

• 略過自身檢測

@SkipSelf()
複製代碼

• 用來注入被標記Injectable的類

@Inject({ 
  token: any
})
複製代碼