Angular2:@HostBinding还是host:{}？

我想知道使用

@HostBinding

和组件的

host

属性之间是否有很大的区别（如果有，是什么？）

当我使用动画时，我一直在问自己这个问题，因为我在这些情况下（看起来很接近）：

或

然后我认为这可能是主机绑定的新方式

提前感谢您的建议和意见；）

两者都是等效的。

---

在没有decorator的ES5中，您可以使用

host:{}

官方指导是更喜欢HostListener/HostBinding

从

HostListener/HostBinding装饰程序与主机元数据

<0>风格06－03考虑优先使用@主机监听器和@主机绑定 @Directive和@Component decorators的主机属性

你的选择一定要一致

为什么?？与@HostBinding或方法关联的属性 与@HostListener关联的内容只能在单个 放置在指令的类中。如果使用主机元数据属性， 必须修改控制器内的属性声明， 以及与该指令关联的元数据

但是，angular/material2项目

主机绑定

首选在指令配置中使用主机对象，而不是 @HostBinding和@HostListener。我们这样做是因为TypeScript 保留具有修饰符的方法的类型信息，以及 该方法的参数之一是本机事件类型，如下所示 保留的类型信息可能会导致非浏览器中的运行时错误 环境（例如，服务器端预渲染）

---

好的，这只是使用主机绑定的另一种方式，与输入[]和@input完全一样？是的，装饰器可用的所有内容都可以在

host

中使用，反之亦然。它们真的等效吗？我目前的问题是，它们会导致不同的行为<代码>主机工作，而

@HostBinding

不工作。实际上，我想说->这很有趣，即使angular使用host，尽管它的指导方针是，它们是等价的。在StackBlitz或类似的交易中，回购可能值得一个新问题。我补充了一个问题->会对观察到这种行为的原因非常感兴趣我也注意到了这种矛盾

@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 '';
  }
}