聲明函數和THIS; JavaScript版本

Question

無法在我的AngularScript文件中混合某些版本的JavaScript。

在下面的代碼中，在ngOnInit中，函數globalNavigationHandler沒有被識別，我不能使用this.globalNavigationHandler，因爲它具有我需要保留的不同含義。

我有一個eventlistener不是箭頭函數，因爲我需要這個反彈。

但是，我不知道如何正確獲取函數來識別我稱爲globalnavigationHandler的其他函數。我不能把globalNavigationHandler內聯，因爲它需要注入構造函數的路由器，並且具有不同的含義。

globalNavigationHandler = function(path) { 
    this.router.navigate([path]); 
    } 

    ngOnInit() { 
    var nav = document.getElementById("uhf-c-nav"); 
    var anchors = nav.getElementsByTagName("a"); 

    for (var i = 0; i < anchors.length; i++) { 
     anchors[i].addEventListener(
     "click", 
     function(event) { 
      event.preventDefault(); 
      console.log("this is the element the event is bound to: " + this.id); 
      console.log("the event target is the clicked element: " + event); 
      console.log("this: " + this); 
      console.log("this.pathname: " + this.pathname); 

      globalNavigationHandler(this.pathname); 
     }, 
     false 
    ); 
    } 
    } 

感謝

Answer 1

globalNavigationHandler應該是類方法，因爲它的語義正確，它仍然需要爲了得到this.router綁定到適當的this。如果達到this.globalNavigationHandler的等級方法存在問題，則應以其他方式解決。

當有兩種情況正在使用時，有幾種方法可以處理這種情況。最流行的和簡單的方式做，這是分配其中的一個變量：

const self = this; 
... 

    anchors[i].addEventListener(
    "click", 
    function(event) { 
     ... 
     self.globalNavigationHandler(this.pathname); 
    }, 
    false 
); 

在實踐中很少用到，因爲它是一個很好的做法回撥主叫方不依賴於this並提供回調所有必要的信息參數。在事件監聽器中，它是event.target，它等於上面代碼中的this。它應該是：

anchors[i].addEventListener(
    "click", 
    event => { 
     ... 
     this.globalNavigationHandler(event.target.pathname); 
    }, 
    false 
); 

看來，這是XY問題，應該以對Angular來說很自然的方式來解決。通常你不需要直接在Angular中使用addEventListener。 Renderer2提供程序是用於DOM相關操作的抽象，如here所示，元素引用應使用ViewChild/ViewChildren進行檢索。

如果可以通過指令而不是父指令單獨設置監聽器，這是更好的方法。

Answer 2

globalNavigationHandler(path) { 
    this.router.navigate([path]); 
} 

儘量簡單地宣告它這樣。

編輯 - 通常我會提供一個更好的解釋...但我沒有太多的'香草'javascript經驗。也許別人可以解釋爲什麼會出現這種情況。我只知道這是如何在typescript中的類中聲明函數的。如果您在另一個函數中聲明瞭一個函數，但是您可以使用原始文章中的符號，但是聲明瞭一個沒有賦值和函數關鍵字的類函數。

ngOnInit() { 
    var nav = document.getElementById("uhf-c-nav"); 
    var anchors = nav.getElementsByTagName("a"); 

    for (let anch of anchors) { 
     anch.addEventListener(
     "click", 
     (event) => { 
      event.preventDefault(); 
      console.log("this is the element the event is bound to: " + anch.id); 
      console.log("the event target is the clicked element: " + event); 
      console.log("anch: " + anch); 
      console.log("anch.pathname: " + anch.pathname); 

      this.globalNavigationHandler(anch.pathname); 
     }, 
     false 
    ); 
    }