攔截傳出鏈接Angular 4

所以我寫這個小應用程序，我顯示從維基百科獲取的一些信息。此抓取的HTML內部也有鏈接。攔截傳出鏈接Angular 4

所以我想做的事：

用戶點擊一個鏈接，每次我想這攔截並進行自定義的行爲，而不是默認的瀏覽器重定向。

Angular httpinterceptor中的構建在這裏不起作用。我如何得到這種效果？

編輯：好像我誤解了href和http請求的工作方式。我仍然想對自己的應用程序中點擊的每個鏈接執行自定義行爲。有沒有可能的方法來攔截這些「事件」？

編輯：對於Angular 2+解決方案請看下面的答案。它是一個攔截標籤的服務。

來源

2017-10-04 rufreakde

爲什麼*會* 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，但相對靈活。

來源

2017-10-04 09:05:48 rufreakde

加載新頁面不是XHR請求。所以攔截器不能工作。您需要捕獲點擊事件，並防止傳播：

模板：

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

組件：

myHandler(event){ 
    event.preventDefault(); 

    doSomethingElse(); 
}

來源

2017-10-04 08:20:45 j2L4e

感謝您的回覆，但我是否必須解析所有來自維基百科的HTML我只是爲了這麼做而獲取？似乎我誤解了這一點：https：//developer.mozilla.org/en-US/Add-ons/WebExtensions/Intercept_HTTP_requests – rufreakde

攔截傳出鏈接Angular 4

回答

相關問題