拦截外向链接Angular 4

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>