javascript - Typescript: Setting members of object via callback fails strangely -

i have strange issue did not find cause yet. try show textbox component in angular 2, can give message, label button , callback invoked, when button clicked.

here component:

@component({   selector: 'text-box',   templateurl: './textbox.component.html',   styleurls: ['./textbox.component.styl'] }) export default class textboxcomponent implements afterviewinit {   content: string;   btncaption: string;   callback: () => void;    constructor(@inject(textboxservice) private service: textboxservice) {   }    ngafterviewinit(): void {     this.service.init(this.show);   }    public show(message: string, btncaption: string, callback: () => void) {     this.content = message;     this.btncaption = btncaption;     this.callback = callback;     // (1)     // set opacity 1   }    public btnonclick() {     // (2)     this.callback();     this.dismiss();   }    public dismiss() {     // set opacity 0   } } 

components singletons , cannot injected, cannot invoke show() on component outside. therefore added service , put reference method (see component's ngafterviewinit() method):

@injectable() export default class textboxservice {   private showcallback: (m: string, b: string, c: () => void) => void;    public init(showcallback: (m: string, b: string, c: () => void) => void) {     this.showcallback = showcallback;   }    public show(message: string, btncaption: string, callback: () => void) {     this.showcallback(message, btncaption, callback);   } } 

it invoked service this:

this.textboxservice.show(   'wollen sie einen kredit aufnehmen?',   'ja', () => {     ziel.activate();     this.activatedevents.set(event, ziel);     this.inputservice.kreditinput.summe = ziel.getprice() - ziel.getliquidfunds();     this.inputservice.kreditinput.startdatum = date;   }); 

however, text not update when button above called, neither listener attached button (showing this.callback() not function). debugged (put console.log()s on (1) , (2) in component) , found out, both methods correctly called. on (1) members content, btncaption , callback correctly set - on (2), these members undefined!

i tried replacing fat-arrow-syntax function()-syntax no success. tried hard-coding string inside show() when accessing via buttonclick, it's still undefined.

it seems on (1) , (2) there 2 different objects accessed. have no idea reason behaviour be. ideas?

class prototype methods supposed passed callbacks design (as in this.service.init(this.show)) should defined arrow class properties:

public show = (message: string, btncaption: string, callback: () => void) => { ... }; 

or bound on class construction:

constructor(@inject(textboxservice) private service: textboxservice) {   this.show = this.show.bind(this); } 

alternatively, decorators may used neater syntax, e.g. @autobind core-decorators.