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);
  }  

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

Stackblitz


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

#local variable внутри *ngIf

Представлены 2 варианта решения, как сослаться на локальную переменную шаблона (#myVar) за пределами шаблона:

  • @ViewChild
  • @ViewChildren
13 февраля 2019 г. в Angular

Angular. Редирект по условию

Пример условного перенаправления пользователя в зависимости от некого количества

  • 0 - dashboard
  • 1 - карточка
  • 2 и более - список
10 января 2019 г. в Angular