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?

Titian Cernicova-Dragomir · Accepted Answer · 2017-08-24 21:35:35Z

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, 2017 at 21:35

Titian Cernicova-Dragomir

253k37 gold badges464 silver badges394 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Titian Cernicova-Dragomir Over a year ago

Anyone care to comment why they down voted? Want to know what the problem is maybe I can fix it :)

John Montgomery Over a year ago

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).

Titian Cernicova-Dragomir Over a year ago

@Diopside has a point, if angular provides a way to listen for host events it is best to use that :)

Darius.V Over a year ago

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?

diopside · Accepted Answer · 2017-08-24 21:44:33Z

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, 2017 at 21:44

diopside

3,05213 silver badges23 bronze badges

1 Comment

myroslav Over a year ago

This works as well as the accepted answer, but Titan was first.

John Montgomery · Accepted Answer · 2017-08-24 21:40:46Z

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, 2017 at 21:40

John Montgomery

7,10610 gold badges58 silver badges73 bronze badges

1 Comment

myroslav Over a year ago

This works as well as the accepted answer, but Titan was first.

Collectives™ on Stack Overflow

How to access global typescript variable from anonymous function

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related