Angular2：@HostBinding 或主机：{}？

Question

我想知道在使用组件的 @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 '';
  }
}

然后我想这可能是一种新的主机绑定方式。

提前感谢您的建议和意见 ;)

Answer 1

两者是等价的。
在没有装饰器的ES5中，可以使用host: {}

Answer 2

官方指导更喜欢HostListener/HostBinding

来自 Angular style guide

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).

Angular2：@HostBinding 或主机：{}？

Angular2: @HostBinding or host: {}?

animation

host

angular