Angular2：@HostBinding或主持人：{}？

发布时间：2020-12-17 06:51:38 所属栏目：安全来源：网络整理

导读：我想知道在使用@HostBinding和组件的主机属性之间是否存在巨大的差异(如果存在,是什么？)？当我使用动画时,我一直在问自己这个问题,因为我在这些情况下(看起来相当接近)： @Component({ selector: 'mycomponent',animations: [ trigger('myTransition',[ st

我想知道在使用@HostBinding和组件的主机属性之间是否存在巨大的差异(如果存在,是什么？)？

当我使用动画时,我一直在问自己这个问题,因为我在这些情况下(看起来相当接近)：

@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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!