Question

所以我写了这个小应用程序，在那里我展示了从维基百科中提取的一些信息。此获取的HTML中也有链接。

所以我想做什么：

每次用户点击链接时，我都想截取此链接并执行自定义行为，而不是默认的浏览器重定向。

Angular httpinterceptor中的构建在这里不起作用。我该如何获得这种效果？

编辑：好像我误解了href和http请求是如何工作的。我仍然希望在点击我的应用程序的每个链接上执行自定义行为。有没有办法拦截这些“事件”？

编辑：对于Angular 2+解决方案，请查看下面的答案。它是拦截标签的服务。

Answer 1

好的搜索了一会儿之后我找到了一个“没有角度”的解决方案： Override default behaviour for link ('a') objects in Javascript

所以我创建了一个服务并将其注入我的App Root组件。

import { Injectable } from '@angular/core';

@Injectable() export class HrefInterceptorService {

    constructor() {
        document.onclick = this.interceptHref;
    }

    interceptHref(_event) {
        const tEvent = _event || window.event;

        const element = tEvent.target || tEvent.srcElement;

        if (element.tagName === 'A') {

            console.log("intercept!");

            return false; // prevent default action and stop event propagation
        }
    } }

它有点hacky但相对灵活。

Answer 2

加载新页面不是XHR请求。因此拦截器无法工作。您需要捕获click事件并阻止传播：

模板：

<a href="//example.com" (click)="myHandler($event)">Click me</a>

成分：

myHandler(event){
  event.preventDefault();

  doSomethingElse();
}

Answer 3

出于分析目的，我还需要使用[innerhtml]构建的页面来跟踪出站点击。我尝试了很多方法，但是答案却非常简单。我只需要检查几个升级父母，以获取适当的链接元素：

public hrefClicked( $event )
{
  let targetElement;

		if( ( $event.srcElement.nodeName.toUpperCase() === 'A') )
		    targetElement = $event.srcElement;
		else if( $event.srcElement.parentElement.nodeName.toUpperCase() === 'A' )
		    targetElement = $event.srcElement.parentElement;
		else
		    return;

		//  console.log( "Found LINK:" );
		//  console.log( targetElement.href );

		if( targetElement.href && !targetElement.href.includes("mydomain"))
    {
	    console.log( "OUTBOUND LINK:" + $event.srcElement.href );
    }
	}

<div class="container-fluid" (click)="hrefClicked($event)">
  <div class="row">
    <div class="col-xs-12">
      <div class="article-body" [innerHTML]="article.content"></div>
    </div>
  </div>
</div>

拦截外向链接Angular 4

3 个答案: