Блог

С помощью jQuery я могу просто написать что-то вроде

 $(document).on("blur", ".class_name", function(){}
  

для того, чтобы вызвать некоторую функцию при событии размытия class_name элементов. Как бы я добился тех же результатов с помощью angular?

Такие решения, как

 <input (blur)='on_blur_function()'.... >
  

к сожалению, для моего случая неприемлемы. Спасибо.

Вы можете сделать это легко:

импортируйте и вводите ElementRef в конструктор

 constructor(private elem: ElementRef){}
  

Поиск элементов с помощью API querySelectorAll.

 ngAfterViewInit(){
    let elements = this.elem.nativeElement.querySelectorAll('.class_name');
    elements.forEach(element => {
     // you can iterate through each element and call your function
     this.on_blur_function(); // call your function
 });
}
  

Вы можете создать директиву и использовать класс в качестве ее селектора :

 import { Directive, HostListener } from "@angular/core";

@Directive({
  selector: ".foo"
})
export class BlurredDirective {
  @HostListener("blur")
  blurred() {
    console.log("blurred");
  }

  constructor() {}
}

  

В вашем шаблоне :

 <input class="foo" >
  

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

 import {
  AfterViewInit,
  Component,
  ElementRef,
  OnDestroy,
  QueryList,
  ViewChildren
} from "@angular/core";
import { fromEvent, Subject } from "rxjs";
import { takeUntil } from "rxjs/operators";

@Component({
  selector: "my-app",
  template: `
    <input #inputRef />
    <input #inputRef />
  `,
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements AfterViewInit, OnDestroy {
  @ViewChildren("inputRef") elements: QueryList<ElementRef>;

  ngUnsubscribe$ = new Subject<void>();

  ngAfterViewInit() {
    this.elements.forEach(element => {
      fromEvent(element.nativeElement, "blur")
        .pipe(takeUntil(this.ngUnsubscribe$))
        .subscribe((event: FocusEvent) => this.customBlurEvent(event));
    });
  }

  ngOnDestroy() {
    this.ngUnsubscribe$.next();
  }

  customBlurEvent(event: FocusEvent) {
    console.log({ event });
  }
}
  

Добавляя #inputRef к входным данным, вы можете запросить его после инициализации представления внутри ngAfterViewInit . rxjs имеет имя наблюдаемого создателя fromEvent , который принимает источник и тип события, в данном случае входные данные и событие размытия. Затем вы можете отправить свой метод с событием, отписавшись от источника события, когда компонент будет уничтожен (отсюда и мой призыв takeUntil , чтобы избежать утечек памяти).