How to access global typescript variable from anonymous function

Question

I have an Angular2 application and I want to perform some logic when the user closes the browser window. I am using beforeunload event of the browser window. I have placed the following code in my TypeScript class constructor:

export class MyAngularComponent implements OnInit, OnDestroy {  

  callServer()
  {
     //Logic to call the server
  }

  constructor(private updateServiceFactory: UpdateService) {

    window.onbeforeunload = function(e){
      this.callServer();  //this does not work            
    }
  }
}

I am getting the compile error in the line this.callServer(). The error says "Property 'callServer' does not exist on type 'Window'". I understand that "this" in the context of the anonymous function refers to the Window object.

Question: how do I call callServer() method from inside of the anonymous function?

score 8 · Accepted Answer · answered Aug 24 '17 at 21:35

8

Use an arrow function instead of a simple function. Arrow functions capture this from the declaring context.

export class MyAngularComponent implements OnInit, OnDestroy {  

  callServer()
  {
     //Logic to call the server
  }

  constructor(private updateServiceFactory: UpdateService) {

    window.onbeforeunload = (e) => {
      this.callServer();  //this now refers to MyAngularComponent             
    }
  }
}

answered Aug 24 '17 at 21:35

Titian Cernicova-Dragomir

230,986
31
415
357

Anyone care to comment why they down voted? Want to know what the problem is maybe I can fix it :) – Titian Cernicova-Dragomir Aug 24 '17 at 21:44
My answer and the question were also downvoted, so I suspect someone just went through and blindly downvoted everything for some reason (the other answers hadn't been posted yet). – John Montgomery Aug 24 '17 at 21:46
1

@Diopside has a point, if angular provides a way to listen for host events it is best to use that :) – Titian Cernicova-Dragomir Aug 24 '17 at 21:47
it sees this, but I cannot make it see other variable defiuned before anonimous function. WIth php I just use use keyword and it is simple. How can it be so complicated in typescript? – Darius.V Dec 15 '22 at 15:51

score 4 · Answer 2 · answered Aug 24 '17 at 21:44

4

Try using HostListener in your component, and not in the constructor.

 @HostListener('window:beforeunload', ['$event'])
 doSomething($event) {
     // your code here //
 }

The constructor is usually not a good place to do anything other than stuff directly related to parameters passed into the constructor.

answered Aug 24 '17 at 21:44

diopside

2,981
11
23

This works as well as the accepted answer, but Titan was first. – myroslav Aug 24 '17 at 22:33

score 2 · Answer 3 · answered Aug 24 '17 at 21:40

2

You can use bind to change the function's this to the correct context.

window.onbeforeunload = function(e){
  this.callServer();
}.bind(this)

answered Aug 24 '17 at 21:40

John Montgomery

6,739
9
52
68

This works as well as the accepted answer, but Titan was first. – myroslav Aug 24 '17 at 22:33

How to access global typescript variable from anonymous function

3 Answers3