Angular2 : @HostBinding or host: {}?

我想知道使用@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

来自Angular style guide



但是，angular/material2项目says to prefer "host"

关于Angular2 : @HostBinding or host: {}?，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42632114/