Angular组件元数据

2019独角兽企业重金招聘Python工程师标准>>>

• selector: string,   //用于匹配自定义的元素标签
• template: string,   //指定组件内联模版
• templateUrl: string,   //指定组件模版所在的路径
• styles: string[],   //指定组件内联样式
• styleUrls: string[],   //指定组件引用的样式文件路径
• providers: any[],   //指定该组件及其子组件可用的服务（含ContentChildren）
• viewproviders: any[],   //指定该组件及其子组件可用的服务（不含ContentChildren）
• host: {[key: string]: string;},   //指定指令(组件)的事件、动作和属性等
• animations: AnimationEntryMetadata[],   //设置Angular动画
• inputs: string[],   //指定组件的输入属性，和@input作用一样
• outputs: string[],   //指定组件的输出属性，和@output作用一样
• exportAs: string,   //给指令分配一个变量，可以在模版中使用这个变量调用指令
• moduleID: string,   //包含该组件模块的id，被用于解析模版和样式的相对路径，不要用
• queries: {[key: string]: string;},   //设置需要被注入到组件的查询
• changeDetection: ChangeDetactionStrategy,   //指定使用的变化监测策略
• encapsulation: ViewEncapsulation,   //设置组件的视图包装选项，一般不用碰它
• interpolation: [string, string]   //设置自定义插值标记，默认双花括号

大部分元数据浅显易懂，这里挑选出相对复杂的进行说明：

queries :

在组件中主要有两种查询，视图查询(ViewChild/ViewChildren)和内容查询(ContentChildren)，它们分别会在ngAfterViewInit和ngAfterContentInit回调函数被调用之前设置。

如:

queries: {
  xx: new ContentChildren(xxx)
}
export class AA implement AfterContentInit {
  xx: QueryList<xxx>;
  ngAfterContentInit() {
    //对xx进行操作
  }

animations :

需要先从@angular/animations中引入用于动画的函数，API中以F标识。设置好动画后在模版中通过@triggerName=”state“来使用它。

encapsulation :

• ViewEncapsulation.None : 无Shadow DOM，并且也无样式包装。组件样式被写到document头部<header>标签里。
• ViewEncapsulation.Emulated : 无Shadow DOM，但是通过Angular提供的样式包装机制来模拟组件的独立性，默认。
• ViewEncapsulation.Native : 使用原生Shadow DOM特性。

转载于:https://my.oschina.net/u/3412211/blog/894877