EventListener не срабатывает

Question

Я обновил свой ionic3 до ionic4, и гиперссылки больше не работают. Поэтому я попытался установить новый ClickEvent для них. К сожалению, событие click не работает. Содержание моего мероприятия никогда не будет достигнуто, даже если я нажму на какую-нибудь ссылку. Я не понимаю, почему это не работает.

ngAfterViewChecked() {
	if (!this._element) return;
	let arrUrls = this._element.nativeElement.querySelectorAll('a');
	console.log("arrUrls.length:", arrUrls.length); // Reached and correct
	console.log("arrUrls:", arrUrls); // Reached and correct
	this.setEventListener(arrUrls);
}


private setEventListener(arrUrls)
{
	arrUrls.forEach((objUrl) =>
	{
		console.log('5412212112121212'); // Reached
		console.log(objUrl); // Reached and correct
		// Listen for a click event on each hyperlink found
		objUrl.addEventListener('click', (event) =>
		{
			//NOT REACHED
		
			event.preventDefault();
			alert('7213983728912798312231'); // Isn't reached
			//this._link = event.target.href;
		}, false);
	});
}

Answer 1

Вам не нужно подробно разбираться и писать все это самостоятельно.

Другие люди уже решили эту проблему, например, проект LinkifyJS.

Существует угловая совместимая оболочкадля него:

• https://www.npmjs.com/package/ngx-linkifyjs

Который, после того как вы выполнили стандартный процесс настройки, вы можете использовать его в качестве канала:

<span [innerHTML]="'Linkify the following URL: https://github.com/anthonynahas/ngx-linkifyjs and share it <3' | linkify"></span>

Или как услуга:

import {NgxLinkifyjsService, Link, LinkType, NgxLinkifyOptions} from 'ngx-linkifyjs';

constructor(public linkifyService: NgxLinkifyjsService) {

  const options: NgxLinkifyOptions =
     {
      className: 'linkifiedYES',
      target : {
          url : '_self'
        }
      };

  this.linkifyService.linkify('For help with GitHub.com, please email support@github.com');
  // result 1 --> see below

  this.linkifyService.linkify('For help with GitHub.com, please email support@github.com', options);
    // result 2 --> see below
 } 
}