Using Angular 5 to transfer a callback function to an external script within Angular

Question

Using Angular 5 to transfer a callback function to an external script within Angular

Utilizing an external 3rd party script, I am trying to trigger a function called show_end_screen (found below)

Within 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) <== At this point, I am passing show_end_screen to the imported script. When the 3rd party script executes show_end_screen(data), I am able to successfully log the data to the console. However, I do not have access to this or any other Angular reference.

this.router.navigate(['play']); <== This line triggers a console error

ERROR TypeError: Cannot read property 'nav' of undefined

angular typescript

Answer 1

Answer №1

When passing a class-bound method as a value, it loses the context (this). To address this issue, you can either explicitly bind or lexically bind within the callback function:

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

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

An alternative approach is to use an instance-bound method for your component instead.

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

Answer 2

When passing a class-bound method as a value, it loses the context (this). To address this issue, you can either explicitly bind or lexically bind within the callback function:

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

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

An alternative approach is to use an instance-bound method for your component instead.

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

Answer 3

Answer №2

The reason behind this issue is that this points to the calling context, not the context where you assign your callback. To resolve this, clarify the context to which this should refer by using the bind function.

To successfully tackle this problem, modify your code as follows:

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

Answer 4

The reason behind this issue is that this points to the calling context, not the context where you assign your callback. To resolve this, clarify the context to which this should refer by using the bind function.

To successfully tackle this problem, modify your code as follows:

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

Answer 5

Answer №3

It seems like this.router is expected to be initialized in the constructor function

In addition to @Explossion Pills' response, another approach could be defining your method as a property to avoid repetitive bind() calls

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

Answer 6

It seems like this.router is expected to be initialized in the constructor function

In addition to @Explossion Pills' response, another approach could be defining your method as a property to avoid repetitive bind() calls

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

Using Angular 5 to transfer a callback function to an external script within Angular

Answer №1

Answer №2

Answer №3

Similar questions

Angular2 Dependency Injection with NPM-MQTT

What are the steps for running an Angular 7 application on both Android and iOS devices?

Can Typescript classes be hoisted if I use two classes in my code?

The mat-select element is defaulting to the last value in a loop for all dropdown selections

Communication between Angular services and the issue of 'circular dependency detected' alerts

Jasmine was unsuccessful in detecting a exported function being invoked by another function

Guide to setting a default value for a select option in Angular 2+

Tips on obtaining a unique value that does not already exist in a specific property within an Array of objects

Angular 7 ERROR: The SystemJS reference is missing

How can I eliminate the back button from my personalized login component in ngx-admin/Nebular?

The integration of Angular and Node API within the IISNode directory structure is experiencing functionality issues

What steps can I take to make my animation work in the opposite direction as well?

Error in TypeScript: The property "component" is not found on the React MUI MenuItem

Unable to modify the height and color of tabs in Angular 6

Is there a way to use a single url in Angular for all routing purposes

Tips on storing and retrieving data between pages in Ionic 4/5: Saving data to a service and accessing it from a

ERROR: The variable countryCallingCode has not been defined

Error encountered when building with --prod flag due to AngularFireFunctions injection issue

Expo + tRPC: Oops! Looks like the application context couldn't be retrieved. Don't forget to wrap your App inside the `withTRPC` HoC for

Is it possible to lengthen a function in TypeScript?