EventListener不会触发

Question

I updated my ionic3 to ionic4 and hyperlinks aren't working anymore. So I tried to set a new ClickEvent for them. Unfortunately the click event doesn't work. The content of my event is never reached even If I click some link. I don't get why it's not working.

 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

You don't really need to get so detailed and write this all yourself.

Other people have already solved the problem such as the LinkifyJS project.

There is an angular compatible wrapper for it:

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

Which, once you have done the standard setup process you can use it as either a pipe:

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

Or as a service:

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
 } 
}