Question

我将ionic3更新为ionic4，超链接不再起作用。因此，我尝试为他们设置一个新的ClickEvent。不幸的是，点击事件无效。即使单击某些链接，也永远无法到达活动的内容。我不明白为什么它不起作用。

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

EventListener不会触发

1 个答案: