Angular: onClick на элемент HTML в соответствии с его классом - PullRequest
Новая
       35

Angular: onClick на элемент HTML в соответствии с его классом

0 голосов
/ 06 октября 2018

В моем приложении Angular я использую третий виджет библиотеки, который рендерится в моем компоненте.

Мой шаблон: 

<div>
  <myWidGet></myWidGet>
</div>

Внутри myWidGet есть какой-то элемент кнопки, который я хочу обрабатывать своими событиями.У кнопки есть эти классы: .dx-edit-row .dx-command-edit .dx-link-save

, поэтому я делаю это: 

export class myClass AfterViewInit { 

  constructor(private elRef: ElementRef){}

  ngAfterViewInit() {
    this.elRef.nativeElement.querySelector('.dx-edit-row .dx-command-edit .dx- 
link-save').on('click', (e) => {
      alert('test');
    });
  }

}

Моя цель - получить ссылку на мою кнопку и обработатьщелкните по событию .

Предложения?

Ответы [ 3 ]

0 голосов
/ 06 октября 2018

Доступ к элементам DOM с использованием jQuery не очень хорошая практика.Вместо этого используйте ElementRef с Renderer2.Кроме того, нет ничего похожего на ngOnViewInit в Angular.Это ngAfterViewInit.

После загрузки View внутри ngAfterViewInit вы можете получить доступ к HTMLElement, используя экземпляр nativeElement on ElementRef.Вы должны явно ввести его в HTMLElement, чтобы получить интеллектуальность.

Затем вы можете вызвать querySelector и передать ему классы.Это даст вам элемент button.

Теперь вы используете Renderer2 'instances' listen метод.Это займет три аргумента:

  1. Элемент, на котором вы хотите прослушивать события (btnElement).
  2. Имя события (click).
  3. Функция обратного вызова.

Это будет преобразовано в код, подобный: 

constructor(
  private el: ElementRef,
  private renderer: Renderer2
) {}

ngAfterViewInit() {
  const btnElement = (<HTMLElement>this.el.nativeElement)
    .querySelector('.dx-edit-row.dx-command-edit.dx-link-save');

  this.renderer.listen(btnElement, 'click', () => {
    alert('Buton was clicked');
  });
}

Вот Рабочий StackBlitz для вашей ссылки.

0 голосов
/ 06 октября 2018

Вы можете настроить сторонний виджет, используя Angular Directive.Это позволит получить доступ к элементу DOM и подключить слушателей, используя renderer2. 

<myWidGet customEvents></myWidGet>

Директива: 

@Directive({
   selector: '[customEvents]'
})
export class CustomEventsDirective implements OnInit {
    private element: any;
    constructor(private el: ElementRef, private renderer: Renderer2) {
        this.element = el.nativeElement;
    }
    ngOnInit() {

       const btnElement = this.element.querySelector('.dx-edit-row.dx-command-edit.dx-link-save');

       this.renderer.listen(btnElement, 'click', () => {
         alert('Buton was clicked');
       });
    }
}
0 голосов
/ 06 октября 2018

Обычно виджет стороннего производителя должен предоставлять обработчик щелчков, например: 

<myWidGet (click)="myFunction($event)"></myWidGet>

и в контроллере: 

myFunction(evt) {
  const target = evt.target
  console.log('test')
}

Однако, если они не предоставляют обработчики щелчков, то ясерьезно подумал бы не использовать виджет.

Если вы все равно хотите использовать виджет, то сделайте это с помощью jQuery: 

ngAfterViewInit() {
  $('.dx-edit-row.dx-command-edit.dx-link-save').on('click', (evt) => {
    const target = evt.target
    console.log('test')
  });
}

Выше предполагается, что ВСЕ эти классы присутствуют на одной кнопке.

Или просто используйте vanilla JS.

Если кнопки недоступны на ngAfterViewInit(), вы можете сделать это: 

ngAfterViewInit() {
  const interval = setInterval(() => {
    const button = $('.dx-edit-row.dx-command-edit.dx-link-save')
    // if button is ready
    if (button) {
      // add click handlers
      button.on('click', (evt) => {
        const target = evt.target
        console.log('test')
      });
      // stop polling
      clearInterval(interval)
    }
  }, 100)
}
...