은 "smith"의 콜백에서 "this"를 잃었습니다

Question

저는 HTML 편집기로 tinyMce가있는 angular2 앱을 가지고 있습니다. 유일한 문제는 내 REST API를 통해 html의 URL을 변환해야한다는 것입니다. 내가 TinyMCE에에서 "urlconverter_callback"를 사용하려고 그렇게, 그러나 나는이에 대한 참조를 느슨하게하고 집착하기 : 내가 볼 수있는 콘솔에서

ngAfterViewInit(): void { 
    console.log('tinymce'); 
    tinymce.init({ 
     selector: `[data-tinymce-uniqueid=${this.uniqueId}]`, 
    theme: "modern", 
    skin: 'light', 
    height: 768, 
    toolbar: 'undo redo | styleselect | bold italic | link image | code', 
    plugins: 'code', 
     schema: 'html5', 
    urlconverter_callback: this.urlConverter, 
     setup: ed => { 
      ed.on('init', ed2 => { 
       if (this.innerValue) ed2.target.setContent(this.innerValue.text); 
       this.init = true; 
      }); 
     } 
    }); 

    // I chose to send an update on blur, you may choose otherwise 
    tinymce.activeEditor.on('blur',() => this.updateValue()); 
} 

urlConverter(url, node, on_save): string { 
    console.log("TinyDirective.urlConverter(%o, %o, %o)", url, node, on_save); 
    console.log("TinyDirective.urlConverter: this = %o", this); 
    console.log("TinyDirective.urlConverter: this.innerValue = %o", this.innerValue); 
    return this.innerValue.url_converter(url); 
} 

을,이 더 이상 내 지시를 가리키고 있는지. 결과적으로 innerValue 속성에 액세스 할 수 없습니다.

내 지시문을 올바르게 참조 할 콜백을 어떻게 만듭니 니?

Answer 1

당신은 이러한 옵션 중 하나를 시도 할 수 있습니다 :

이

1) tinymce.init

urlconverter_callback: this.urlConverter.bind(this) 

내에서 또는 생성자 내에서 bind를 사용

constuctor() { 
    this.urlConverter = this.urlConverter.bind(this); 
} 

2)는 urlConverter 방법

에 화살표 기능을 사용

urlConverter = (url, node, on_save): string => { 
    ... 
} 

또는

urlconverter_callback: (url, node, on_save) => this.urlConverter(url, node, on_save)