@angular装饰器总结

最新推荐文章于 2025-06-16 18:40:37 发布

转载最新推荐文章于 2025-06-16 18:40:37 发布 · 221 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b0ac2db51882538a2403f2e

文章标签：

#javascript #ViewUI

本文详细介绍了Angular中各类装饰器的使用方法，包括NgModule、Component、Directive、Pipe等类装饰器，以及Input、Output、HostBinding等属性装饰器，帮助开发者更好地理解和应用Angular框架。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

类装饰

装饰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
})
复制代码