HostListener/HostBinding vs host метадата

Официальное руководство рекомендует использовать декораторы @HostListener и @HostBinding.

Свойство, связанное с @HostBinding, или метод, связанный с @HostListener, могут быть изменены только в одном месте - в классе директивы/компонента. Если вы используете host свойство метаданных, вы должны поправить код в 2 местах:

  • объявление свойства/метода в классе директивы/компонента
  • метаданные в декораторе, связанные с директивой

host

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-hello',
  template: `<p>hello</p>`,
  styles: [`:host(.some-class) { color: red; }`],
  host: {
    '[attr.role]': 'role',
    '(mouseenter)': 'onMouseEnter()',
    '(click)': '_toggle($event)',
    '[class.some-class]': 'someField',
    'class': 'one two three',
    'style': 'display: inline-block;',
  }
})
export class HelloComponent implements OnInit {
  role = 'main';
  someField = false;

  ngOnInit() {
    setTimeout(() => {
      this.someField = true;
    }, 500);
  }

  onMouseEnter() {
    console.log('HelloComponent onMouseEnter');
  }
}

@HostBinding / @HostListener

import { Component, OnInit, HostBinding, HostListener } from '@angular/core';

@Component({
  selector: 'app-world',
  template: `<p>world!</p>`,
  styles: [`:host(.some-class) { color: blue; }`],
})
export class WorldComponent implements OnInit {
  @HostBinding('attr.role') role = 'note';
  @HostBinding('class') readonly classes = 'one two three';
  @HostBinding('style') readonly staticField2 = 'display: inline-block;';
  @HostBinding('class.some-class') someField = false;
  @HostBinding('style.position')  position = 'absolute'; 
  @HostListener('mouseenter') onMouseEnter() {
    console.log('WorldComponent onMouseEnter');
  }
  @HostListener('click', ['$event']) onClick(e: Event) {
    this._toggle(e);
  }  
  @HostListener('click', ['$event.target.value']) onClick(e) {
    console.log(e);
  }  

  ngOnInit() {
    setTimeout(() => {
      this.someField = true;
    }, 750);
  }
}

Stackblitz


Похожие записи

Отладка Angular в VS Code

Настройка Visual Studio Code используя расширение Debugger for Chrome для отладки Angular приложений
03 декабря 2017 г. в Angular

Переиспользуемые анимации в Angular

Для создания анимации используется функция animation(). Для её использования — useAnimation(). Приводится пример переиспользуемой анимации, а также создание анимации через литерал объекта.

09 октября 2018 г. в Angular

Angular Resolver

Resolver гарантированно получает асинхронные данные до создания компонента исходя из параметров маршрута.