当我使用动画时,我一直在问自己这个问题,因为我在这些情况下(看起来相当接近)：
@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',})
export class MyComponent {
@HostBinding('@myTransition') get myTransition() {
return '';
}
}
然后我认为它可能是主机绑定的新方式.
提前感谢您的建议和意见;)
解决方法
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).
