拦截传出链接Angular 4

问题描述：

所以我写这个小应用程序，我显示从维基百科获取的一些信息。此抓取的HTML内部也有链接。拦截传出链接Angular 4

所以我想做的事：

用户点击一个链接，每次我想这拦截并进行自定义的行为，而不是默认的浏览器重定向。

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

编辑：好像我误解了href和http请求的工作方式。我仍然想对自己的应用程序中点击的每个链接执行自定义行为。有没有可能的方法来拦截这些“事件”？

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

为什么*会* HttpInterceptor的工作？这是为了当你的应用程序向外部Web服务发出请求时，这与应用程序内部，外部或内部的导航无关。只需在元素上实现'click'绑定而不是'href'。 – jonrsharpe

您是否阅读过我从维基百科获取的所有内容？所以我得到他们的链接，但我不想浏览一个链接，但仍然想与他们做自定义行为？我明白Http拦截是错误的，但我该如何实现？ – rufreakde

答

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

所以我创建了一个服务，并将其注入到我的应用根组件中。

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，但相对灵活。

答

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

模板：

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

组件：

myHandler(event){ 
    event.preventDefault(); 

    doSomethingElse(); 
}

感谢您的回复，但我是否必须解析所有来自维基百科的HTML我只是为了这么做而获取？似乎我误解了这一点：https：//developer.mozilla.org/en-US/Add-ons/WebExtensions/Intercept_HTTP_requests – rufreakde

拦截传出链接Angular 4

相关推荐