angular - 拦截传出链接Angular 4

Question

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

那么我想做什么:

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

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

代码:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class HttpInterceptorService implements HttpInterceptor {

  constructor() {

  }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { //HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any>> {
    console.assert(true, 'Intercepting Link request!' + request.url);
    return next.handle(request);
  }
}

我是不是误会了什么？

编辑:好像我误解了 href 和 http 请求的工作原理。我仍然想对点击我的应用程序的每个链接执行自定义行为。难道没有办法拦截那些“事件”吗？

Answer 1

好吧，在搜索了一段时间后，我找到了一个“非 Angular ”的解决方案: Override default behaviour for link ('a') objects in Javascript

因此我从中创建了一个服务并将其注入(inject)到我的 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
        }
    } }

它有点老套，但相对灵活。