typescript - angular 5: skicka en callback-metod till ett tredjepartsskript med angular

Jag behöver verkligen ett importerat skript från tredje part för att utlösa en funktion som show_end_screen (nedan)

min komponent

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) <== Här passerar jag show_end_screen till det importerade skriptet. När tredjepartsskriptet kör show_end_screen(data) loggar jag framgångsrikt data till konsolen. Men jag har inte åtkomst till this eller någon annan referens till Angular

this.router.navigate(['play']); <== här får jag ett fel i konsolen

ERROR TypeError: Cannot read property 'nav' of undefined

Svar #1

När du skickar en metod som är bunden till en klass som ett värde förlorar den kontexten (this). Du kan binda den uttryckligen eller anropa inom callbacken:

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

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

Du kan också använda en instansbunden metod för din komponent istället.

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

Svar #2

Detta beror på att this refererar till den anropande kontexten, inte kontexten från vilken du tilldelar din callback. Du borde kunna få detta att fungera genom att uttryckligen definiera vilken kontext this refererar till genom att använda bind-funktionen.

Så din kod skulle se ut så här:

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

Relaterade artiklar