Angular 2: привязка хоста и прослушивание хоста

Как использовать прослушиватель хоста и привязку хоста в angularjs 2? Я пробовал это для слушателя хоста, но всегда показывал ошибку "Ожидаемая декларация".

app.component.ts:

import {Component, EventEmitter, HostListener, Directive} from 'angular2/core';

@Directive({
    selector: 'button[counting]'
})

class HostSample {
    public click = new EventEmitter();
    @HostListener('click', ['$event.target']);
    onClickBtn(btn){
        alert('host listener');
    }
}

@Component({
    selector: 'test',
    template: '<button counting></button>',
    directives: [HostSample]
})

export class AppComponent {
   constructor(){
   }
}

Ответы

Ответ 1

@HostListener является декоратором метода обратного вызова/события, поэтому удалите ; в конце этой строки:

@HostListener('click', ['$event.target']);

Здесь работает plunker, который я создал, скопировав код из API docs, но я поместил метод onClick() в одну строку для ясности:

import {Component, HostListener, Directive} from 'angular2/core';

@Directive({selector: 'button[counting]'})
class CountClicks {
  numberOfClicks = 0;
  @HostListener('click', ['$event.target']) onClick(btn) {
    console.log("button", btn, "number of clicks:", this.numberOfClicks++);
  }
}
@Component({
  selector: 'my-app',
  template: `<button counting>Increment</button>`,
  directives: [CountClicks]
})
export class AppComponent {
  constructor() { console.clear(); }
}

Связывание хоста также может использоваться для прослушивания глобальных событий:

Чтобы прослушивать глобальные события, к имени события должна быть добавлена цель. Цель может быть окном, документом или телом (ссылка)

@HostListener('document:keyup', ['$event'])
handleKeyboardEvent(kbdEvent: KeyboardEvent) { ... }

Ответ 2

Это простой пример использования обоих из них:

import { Директива, HostListener, HostBinding } от '@ angular/core';

@Directive({
  selector: '[Highlight]'
})
export class HighlightDirective {
  @HostListener('mouseenter') mouseover() {
    this.backgroundColor = 'green';
  };

  @HostListener('mouseleave') mouseleave() {
    this.backgroundColor = 'white';
  }

  @HostBinding('style.backgroundColor') get setColor() {
     return this.backgroundColor;
  };

  private backgroundColor = 'white';
  constructor() {}

}

Введение:

HostListener может привязывать событие к элементу.
HostBinding может привязывать стиль к элементу.
это директива, поэтому мы можем использовать ее для
Некоторые тексты
Итак, согласно отладке, мы можем обнаружить, что этот div привязан style = "background-color: white"
Некоторые тексты
мы также можем обнаружить, что EventListener этого div имеет два события: mouseenter и mouseleave. Поэтому, когда мы перемещаем мышь в div, цвет станет зеленым, мышь уйдет, цвет станет белым.

Ответ 3

@HostListener('click', ['$event.target']);

удалите ;, как указано @BhaRathi RajaMani в комментарии к ответу @mark Rajcok