Делегирование событий в Angular2

Ответ 1

Введение

Я наткнулся на это сегодня, и я действительно вижу необходимость в этой реализации во многих приложениях. Теперь я не могу ручаться, что это на 100% лучшая техника, однако я ушел с пути, чтобы сделать этот подход максимально возможным angular.

Подход, который я придумал, состоит из двух этапов. Оба этапа 1 и 2 будут добавлены в общей сложности years * months + years * months * days, поэтому в течение 1 года у вас будут события 12 + 365.

Этап 1: Делегировать события с того момента, когда в течение дня кликается на день, который был нажат без необходимости события в день.
Этап 2: Продвигайте выбранный день до месяца.

Перед тем, как вникать, приложение состоит из трех компонентов, которые вложены в следующем порядке: app => month => day

Это весь html, который требуется. В app.component есть несколько месяцев, а на сайте month.component есть несколько дней, а day.component ничего не делает, кроме как отображает его как текст.

app.component.html

<app-month *ngFor="let month of months" [data-month]="month"></app-month>

month.component.html

<app-day *ngFor="let day of days" [data-day]="day">{{day}}</app-day>

day.component.html

<ng-content></ng-content>

Это довольно стандартный материал.

Этап 1

Посмотрим на month.component.ts, где мы хотим делегировать наше событие.

// obtain a reference to the month(this) element 
constructor(private element: ElementRef) { }

// when this component is clicked...
@HostListener('click', ['$event'])
public onMonthClick(event) {
  // check to see whether the target element was a child or if it was in-fact this element
  if (event.target != this.element.nativeElement) {
    // if it was a child, then delegate our event to it.
    // this is a little bit of javascript trickery where we are going to dispatch a custom event named 'delegateclick' on the target.
    event.target.dispatchEvent(new CustomEvent('delegateEvent'));
  }
}

На обоих этапах 1 и 2 существует only 1, и это; если у вас есть вложенные дочерние элементы в вашем day.component.html, вам понадобится либо реализовать барботирование для этого, лучшая логика в этом операторе if, либо быстрый взлом будет... в day.component.css :host *{pointer-events: none;}

@HostListener('delegateEvent', ['$event'])
 public onEvent() {
   console.log("i've been clicked via a delegate!");
 }

Это работает, потому что typescript не заботится о том, является ли это событие родным или нет, оно просто привязывает новое событие javascript к элементу и, таким образом, позволяет называть его "изначально" через event.target.dispatchEvent, как мы это делаем выше в month.component.ts.

Это завершает этап 1, мы теперь успешно делегируем события из нашего месяца в наши дни.

Итак, что произойдет, если мы скажем, хотим запустить немного логики в нашем делегированном событии в day.component, а затем вернуть его в month.component - чтобы он мог продолжить свою собственную функциональность в очень объектно-ориентированном метод? К счастью, мы можем очень легко реализовать это!

В month.component.ts обновите следующее. Все, что изменилось, состоит в том, что мы теперь будем передавать функцию с помощью нашего вызова события, и мы определили нашу функцию обратного вызова.

@HostListener('click', ['$event'])
  public onMonthClick(event) {  
    if (event.target != this.element.nativeElement) {
      event.target.dispatchEvent(new CustomEvent('delegateEvent', { detail: this.eventDelegateCallback}));
    }
  }

  public eventDelegateCallback(data) {
    console.log(data);
  }

Все, что осталось, это вызвать эту функцию в day.component.ts...

public onEvent(event) {
    // run whatever logic you like, 
    //return whatever data you like to month.component
    event.detail(this.day);
}

К сожалению, наша функция обратного вызова немного неоднозначно названа здесь, однако typescript будет жаловаться на то, что свойство не является литералом определенного объекта для CustomEventInit, если именовано иначе.

Другая интересная вещь об этом подходе заключается в том, что вам никогда не придется определять больше, чем это количество событий, потому что вы можете просто соединить все события с помощью этой делегирования, а затем запустить логику в day.component.ts для фильтрации с помощью event.type..

month.component.ts

@HostListener('click', ['$event'])
@HostListener('mouseover', ['$event'])
@HostListener('mouseout', ['$event'])
  public onMonthEvent(event) {  
    if (event.target != this.element.nativeElement) {
      event.target.dispatchEvent(new CustomEvent('delegateEvent', { detail: this.eventDelegateCallback }));
    }
  }

day.component.ts

private eventDelegateCallback: any;

@HostListener('delegateEvent', ['$event'])
  public onEvent(event) {
    this.eventDelegateCallback = event.detail;
    if(event.type == "click"){
       // run click stuff
       this.eventDelegateCallback(this.day)
    }
  }