javascript - Angular2 - La propiedad de la clase es indefinida aunque se esté asignando

Tengo el siguiente servicio angular2, muy simple:

@Injectable()
export class DrawingService {
    private _draw:Draw;

    constructor(private mapSvc:MapService) {}

    initialize(geometry: GeometryType):void {
        this._draw = new Draw(this.mapSvc.getMap());
        this._draw.on("draw-end", this.addGraphic);
        this._draw.activate(geometry);
    }


    addGraphic(evt):void {
        this._draw.deactivate();
    }
}

En initialize, estoy configurando el método addGraphic como la función de callback. Ahora el problema es que, dentro de la ejecución del método addGraphic, this._draw está indefinido.

¿Cuál es el problema aquí?

Respuesta #1

Si pasas una referencia de método como

   this._draw.on("draw-end", this.addGraphic);

La referencia a this apunta a la función que llama.

Si usas en su lugar

   this._draw.on("draw-end", this.addGraphic.bind(this));

debería funcionar como se espera.

Alternativamente, también puedes usar funciones flecha, pero esto requiere repetir los parámetros (si es que necesitan ser pasados).

   this._draw.on("draw-end", (param) => this.addGraphic(param));

Respuesta #2

Mueve el código a ngOnInit() en lugar del constructor. Tendrás que implementar OnInit.