Angular: this.confirmPosition 不是函数

Question

我正在尝试检测用户何时退出全屏，例如使用 esc 按钮，我需要在用户退出全屏模式时弹出对话框

代码如下：

ngOnInit(): void {
  const document = window.document;
  if (document.addEventListener)
  {
   document.addEventListener('fullscreenchange',this.exitHandler, false);
   document.addEventListener('mozfullscreenchange',this.exitHandler, false);
   document.addEventListener('MSFullscreenChange',this.exitHandler, false);
   document.addEventListener('webkitfullscreenchange',this.exitHandler, false);
  }
}

exitHandler(){
     const document:any = window.document;
    if (document.webkitIsFullScreen === false){
      this.confirmPosition();
    }else if (document.mozFullScreen === false){
     this.confirmPosition();
    }else if (document.msFullscreenElement === false){
     this.confirmPosition();
    }
   }
  confirmPosition() {
    this.confirmationService.confirm({
        message: 'Do you want to delete this record?',
        header: 'Delete Confirmation',
        icon: 'pi pi-info-circle',
        accept: () => {
           
        },
        reject: () => {
           
        },
        key: "positionDialog"
    });
  }

但是我收到了这个错误，我不知道为什么它确实是一个函数？:

ERROR TypeError: this.confirmPosition is not a function

注意：我正在使用 primeng 对话，但这当然与 confirmPosition 中的内容无关，因为如果我将内容更改为这样：

confirmPosition() {
        console.log('hello ');
}

它仍然报同样的错误。

Answer 1

您需要绑定this.

document.addEventListener('fullscreenchange',this.exitHandler.bind(this), false);

解释:

在js中，调用函数的时候，在那个函数体内，执行的时候，this指针就是调用那个函数的对象。在这种情况下，文档对象调用您在注册事件侦听器时提供的回调。如果你想改变它，你可以使用 fnc1.bind(object)

显式地将一个对象绑定到一个函数

然而，js中的箭头函数会自动绑定到词法范围。

试试下面这个例子，看看控制台，你就会明白发生了什么

import { Component, OnInit, VERSION } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  ngOnInit() {
    // Here, this "pointer"inside the function body will be document object (since document object called it)
    document.addEventListener("click", function() {
      console.log("Inline function", this);
    });

    // Here, it will be the same as in prevoius case
    document.addEventListener("click", this.externalFunction);

    // Here, we will bind this pointer explicitly to a specific object (in this caase its AppComponent instance)
    document.addEventListener("click", this.externalFunctionWithBind.bind(this));

    // Arrow function will automatically bind this to an object that is in the lexical scope
    // Lexical scope is the one that is arounding it and it this case its AppComponent instance
    document.addEventListener("click", () => {
      console.log("Arrow function", this);
    });
  }

  inlineFunction() {
    console.log("Inline Function", this);
  }


  externalFunction() {
    console.log("External Function", this);
  }

    externalFunctionWithBind() {
    console.log("External Function With Bind", this);
  }
}

Angular: this.confirmPosition 不是函数

Angular: this.confirmPosition is not a function

fullscreen

primeng

angular