Me preguntaba si había una diferencia drástica (y si la hay, ¿cuál es?) entre usar @HostBinding y el atributo de host del componente.
Me he estado haciendo esa pregunta mientras usaba animaciones porque estaba en estos casos (que se ven bastante cerca):
@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]': '', }, })O
@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 ''; } }Luego pensé que podría ser la nueva forma de enlace de host.
Gracias de antemano por tus consejos y aportes ;)
La orientación oficial es preferir HostListener/HostBinding
de la guía de estilo angular
Decoradores HostListener/HostBinding frente a metadatos de host
Estilo 06-03 Considere preferir @HostListener y @HostBinding a la propiedad host de los decoradores @Directive y @Component.
Sea consistente en su elección.
¿Por qué? La propiedad asociada con @HostBinding o el método asociado con @HostListener solo se pueden modificar en un solo lugar: en la clase de la directiva. Si usa la propiedad de metadatos del host, debe modificar tanto la declaración de la propiedad dentro del controlador como los metadatos asociados con la directiva.
Sin embargo, el proyecto angular/material2 dice preferir "host"
Enlaces de host
Prefiere usar el objeto host en la configuración de la directiva en lugar de @HostBinding y @HostListener. Hacemos esto porque TypeScript conserva la información de tipo de los métodos con decoradores, y cuando uno de los argumentos para el método es un tipo de evento nativo, esta información de tipo conservada puede generar errores de tiempo de ejecución en entornos que no son de navegador (por ejemplo, preconfiguración del lado del servidor). -representación).
Ambos son equivalentes.
En ES5, donde los decoradores no están disponibles, puede usar host: {}