我想知道在使用组件的 @HostBinding
和 host
属性之间是否存在巨大差异(如果存在,差异是什么?)?
我在使用动画时一直在问自己这个问题,因为我在这些情况下(看起来很接近):
@Component({
selector: 'mycomponent',
animations: [
trigger('myTransition', [
state('inactive', style({
backgroundColor: '#eee',
transform: 'scale(1)'
})),
state('active', style({
backgroundColor: '#cfd8dc',
transform: 'scale(1.1)'
})),
transition('inactive => active', animate('100ms ease-in')),
transition('active => inactive', animate('100ms ease-out'))
])],
host: {
'[@myTransition]': '',
},
})
或
@Component({
selector: 'mycomponent',
animations: [
trigger('myTransition', [
state('inactive', style({
backgroundColor: '#eee',
transform: 'scale(1)'
})),
state('active', style({
backgroundColor: '#cfd8dc',
transform: 'scale(1.1)'
})),
transition('inactive => active', animate('100ms ease-in')),
transition('active => inactive', animate('100ms ease-out'))
])],
})
export class MyComponent {
@HostBinding('@myTransition') get myTransition() {
return '';
}
}
然后我认为这可能是一种新的主机绑定(bind)方式。
提前感谢您的建议和意见;)
最佳答案
官方给出的指导是更喜欢HostListener/HostBinding
HostListener/HostBinding decorators versus host metadata
Style 06-03 Consider preferring the @HostListener and @HostBinding to the host property of the @Directive and @Component decorators.
Do be consistent in your choice.
Why? The property associated with @HostBinding or the method associated with @HostListener can be modified only in a single place—in the directive's class. If you use the host metadata property, you must modify both the property declaration inside the controller, and the metadata associated with the directive.
但是,angular/material2 项目 says to prefer "host"
Host bindings
Prefer using the host object in the directive configuration instead of @HostBinding and @HostListener. We do this because TypeScript preserves the type information of methods with decorators, and when one of the arguments for the method is a native Event type, this preserved type information can lead to runtime errors in non-browser environments (e.g., server-side pre-rendering).
关于 Angular 2 : @HostBinding or host: {}?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42632114/