拦截传出链接 Angular 4

Question

所以我编写了这个小应用程序，其中显示了从维基百科获取的一些信息。在这个抓取的 HTML.

里面也有 links

所以我想做的是：

每次用户点击 link 我想拦截它并执行自定义行为而不是默认的浏览器重定向。

Angular http拦截器中的构建在这里不起作用。我如何获得这种效果？

编辑：好像我误解了 href 和 http 请求的工作原理。我仍然想对每个 link 单击我的应用程序执行自定义行为。有没有办法拦截那些"events"？

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

Answer 1

加载新页面不是 XHR 请求。所以拦截器不能工作。您需要捕获点击事件并防止传播：

模板：

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

组件：

myHandler(event){
  event.preventDefault();

  doSomethingElse();
}

Answer 2

好的，在搜索了一段时间后，我找到了 "not angular" 解决方案： 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
        }
    } }

它有点老套但相对灵活。

Answer 3

我还需要跟踪出站点击次数，以便对使用 [innerhtml] 构建的页面进行分析。我尝试了很多东西，但结果证明答案非常简单。我只需要检查父级的几个级别以获得适当的 link 元素：

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

intercept outgoing links Angular 4

href

httprequest

interceptor

angular