Question

在我的Angular Typescript文件中混合使用某些版本的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(path) {
   this.router.navigate([path]);
}

尝试简单地声明它。

编辑 - 通常我会提供更好的解释...但我没有太多使用'vanilla'javascript的经验。也许其他人可以解释为什么会这样。我只知道这是你在typescript中的类中声明函数的方式。如果在另一个函数中声明一个函数，则可以使用原始帖子中的符号，但声明的类函数没有= assignment和function关键字。

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
      );
    }

Answer 2

globalNavigationHandler应该是类方法，因为它在语义上是正确的，并且仍然需要绑定到正确的this才能获得this.router。如果将类方法作为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检索元素引用。

如果可以设置这些元素，可以单独使用指令单击侦听器而不是父节点，这是更好的方法。

声明功能和THIS; JavaScript版本

2 个答案: