angular 5: pass a callback method to 3rd party script with angular

Question

I really an imported 3rd party script to trigger a function like show_end_screen (below)

my component

import { Router } from '@angular/router';
import { init_game, start_game, stop_game } from '../../assets/js/game';

@Component({})

export class PlayComponent implements OnInit {
    constructor(public router:Router) {}
    ngOnInit() {
        init_game(this.show_end_screen) // load ready
    }
    show_end_screen(data){
        console.log(data) //this works
        this.router.navigate(['play']); //"this" is undefined
    }
}

init_game(this.show_end_screen) <== Here I am passing show_end_screen to the imported script. when the 3rd party script runs show_end_screen(data) I successfully log data to the console. But i dont have access to this or any other reference to angular

this.router.navigate(['play']); <== here i get a console error

ERROR TypeError: Cannot read property 'nav' of undefined

Possible duplicate of How to access the correct `this` inside a callback? — Estus Flask
– Estus Flask, Commented Mar 29, 2018 at 21:02
Possible duplicate of How to properly do a "bind" in angular2 typescript? — yanot
– yanot, Commented Jul 4, 2018 at 23:56

Explosion Pills · Accepted Answer · 2018-03-29 20:50:24Z

6

When you pass a class-bound method as a value it loses the context (this). You can bind explicitly or call within the callback:

ngOnInit() {
  // explicit binding
  init_game(this.show_end_screen.bind(this));

  // lexical binding
  init_game(data => this.show_end_screen(data));
}

You can also use an instance-bound method for your component instead.

show_end_screen = (data) => {
  this.router.navigate(['play']);
}

answered Mar 29, 2018 at 20:50

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

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

2 Comments

Omar Over a year ago

so glad to have your help! .bind(this) ... will that change how the callback is used in the other script?

Omar Over a year ago

I dont understand how it works but It did... Need to study up... Thanks!

Nikolaj Dam Larsen · Accepted Answer · 2018-03-29 20:51:05Z

0

This is because this refers to the calling context, not the context from which you assign your callback. You should be able to make this work, by explicitly defining which context this refers to by using the bind function.

So your code would look like this:

ngOnInit() {
    init_game(this.show_end_screen.bind(this))
}

answered Mar 29, 2018 at 20:51

Nikolaj Dam Larsen

5,7246 gold badges37 silver badges46 bronze badges

Comments

lleon · Accepted Answer · 2018-03-29 20:57:49Z

0

I'm assuming this.router is defined in your constructor

In addition to @Explossion Pills answer, you could define your method as a property and save that bind() call

show_end_screen = (data) => {
  console.log(data) //this works
  this.router.navigate(['play']); //"this" is undefined
}

answered Mar 29, 2018 at 20:57

lleon

2,7751 gold badge24 silver badges15 bronze badges

Collectives™ on Stack Overflow

angular 5: pass a callback method to 3rd party script with angular

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related