名称
类型
作用
exportAs
string
设置组件实例在模板中的别名，使得可以在模板中调用
host
{[key: string]: string}
设置组件的事件、动作和属性等
inputs
string[]
设置组件的输入属性
outputs
string[]
设置组件的输出属性
providers
Provider[]
设置组件及其所有子组件（含ContentChildren）可用的服务（依赖注入）
queries
{[key: string]: any}
设置需要被注入到组件的查询
selector
string
设置用于在模板中识别该组件的css选择器（组件的自定义标签）
几种元数据详解
以下几种元数据的等价写法会比元数据设置更简洁易懂，所以一般推荐的是等价写法。
inputs
@Component({ selector: 'demo-component', inputs: ['param'] }) export class DemoComponent { param: any; }
等价于：
@Component({ selector: 'demo-component' }) export class DemoComponent { @Input() param: any; }
outputs
@Component({ selector: 'demo-component', outputs: ['ready'] }) export class DemoComponent { ready = new eventEmitter<false>(); }
等价于：
@Component({ selector: 'demo-component' }) export class DemoComponent { @Output() ready = new eventEmitter<false>(); }
host
@Component({ selector: 'demo-component', host: { '(click)': 'onClick($event.target)', // 事件 'role': 'nav', // 属性 '[class.pressed]': 'isPressed', // 类 } }) export class DemoComponent { isPressed: boolean = true; onClick(elem: HTMLElement) { console.log(elem); } }
等价于：
@Component({ selector: 'demo-component' }) export class DemoComponent { @HostBinding('attr.role') role = 'nav'; @HostBinding('class.pressed') isPressed: boolean = true; @HostListener('click', ['$event.target']) onClick(elem: HTMLElement) { console.log(elem); } }
queries - 视图查询
@Component({ selector: 'demo-component', template: ` <input #theInput type='text' /> <div>Demo Component</div> `, queries: { theInput: new ViewChild('theInput') } }) export class DemoComponent { theInput: ElementRef; }
等价于：
@Component({ selector: 'demo-component', template: ` <input #theInput type='text' /> <div>Demo Component</div> ` }) export class DemoComponent { @ViewChild('theInput') theInput: ElementRef; }
queries - 内容查询
<my-list> <li *ngFor="let item of items;">{{item}}</li> </my-list>
@Directive({ selector: 'li' }) export class ListItem {}
@Component({ selector: 'my-list', template: ` <ul> <ng-content></ng-content> </ul> `, queries: { items: new ContentChild(ListItem) } }) export class MyListComponent { items: QueryList<ListItem>; }
等价于：
@Component({ selector: 'my-list', template: ` <ul> <ng-content></ng-content> </ul> ` }) export class MyListComponent { @ContentChild(ListItem) items: QueryList<ListItem>; }
styleUrls、styles
styleUrls和styles允许同时指定。
优先级：模板内联样式 > styleUrls > styles。
建议：使用styleUrls引用外部样式表文件，这样代码结构相比styles更清晰、更易于管理。同理，模板推荐使用templateUrl引用模板文件。
changeDetection
ChangeDetectionStrategy.Default：组件的每次变化监测都会检查其内部的所有数据（引用对象也会深度遍历），以此得到前后的数据变化。
ChangeDetectionStrategy.OnPush：组件的变化监测只检查输入属性（即@Input修饰的变量）的值是否发生变化，当这个值为引用类型（Object，Array等）时，则只对比该值的引用。