声明函数和 THIS;JavaScript 版本

Question

在我的Angular Typescript 文件中混合某些版本的 JavaScript 时遇到问题。

在下面的代码中，在ngOnInit中，函数globalNavigationHandler没有被重新识别，我不能使用this.globalNavigationHandler，因为它具有我需要保留的不同含义。

我有一个不是箭头函数的事件侦听器，因为我需要 THIS 反弹。

但是，我不知道如何正确获取函数来识别我称为全局导航处理程序的另一个函数。 我无法将全局导航处理程序内联，因为它需要注入构造函数的路由器，并且具有不同的含义。

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才能获得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相关操作的抽象，如此处所示，元素引用应使用ViewChild/ViewChildren检索。

如果可以使用指令而不是父元素自行设置这些元素，则这是更可取的方法。

Answer 2

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

尝试简单地这样声明它。

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

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