@angular装饰器总结

673 阅读1分钟

类装饰

装饰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
})