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


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

Как добавить ng-bootstrap компоненты в проект Angular-CLI?

Покажу на примере нового проекта.

ng new project_name
cd project_name
npm install --save bootstrap@next
npm install --save @ng-bootstrap/ng-bootstrap

В angular-cli.json в секцию style надо добавить наш CSS, чтобы глобально подключить стили.

  "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
17 августа 2017 г. в Angular

Angular dependency injection

Определение Provider (useClass, useValue, useFactory ), Injector. Декоратор @Inject, ключ multi: true

13 ноября 2018 г. в Angular

Angular Let Directive

*ngIf не отображает содержимое в falsy случаях (0, null, undefined) на async pipe, в пакете @rx-angular/template предлагается решение