无法访问'这个'在角度2
中的addEventListener()内的上下文在我的富文本编辑器组件中,我正在实现图像上传功能。 为此,我编写了一个addEventListener事件处理程序,以便更改'在图像输入标签中,我需要通过'这个'来访问事件监听器内的应用服务。
Imageinput.addEventListener('change', () => {
const file = Imageinput.files[0];
var a = this;
if (Imageinput.files != null && Imageinput.files[0] != null) {
debugger;
this._imageUploadService.uploadImageToBlob(file).subscribe((res) => {
debugger;
this._returnedURL = res.imageUrl;
this.pushImageToEditor();
});
}
}
);
但是this._imageUploadService每次都返回undefined,即使控制台没有任何错误。
Here is my complete component.ts code -
export class CreateArticleComponent extends AppComponentBase {
@ViewChild("fileInput") fileInput;
public editor;
public _returnedURL = "";
constructor(
injector: Injector,
private _imageUploadService: ArticleServiceProxy,
) {
super(injector);
}
onEditorBlured(quill) {
console.log('editor blur!', quill);
}
onEditorFocused(quill) {
console.log('editor focus!', quill);
}
onEditorCreated(quill) {
console.log(quill);
let toolbar = quill.getModule('toolbar');
toolbar.addHandler('image', this.imageHandler);
//this.editorContent = quill;
this.editor = quill;
console.log('quill is ready! this is current quill instance object', quill);
}
imageHandler() {
debugger;
let self = this;
const Imageinput = document.createElement('input');
Imageinput.setAttribute('type', 'file');
//Imageinput.setAttribute('name', 'articleImage');
Imageinput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
Imageinput.classList.add('ql-image');
Imageinput.addEventListener('change', () => {
const file = Imageinput.files[0];
if (Imageinput.files != null && Imageinput.files[0] != null) {
debugger;
this._imageUploadService.uploadImageToBlob(file).subscribe((res) => {
debugger;
this._returnedURL = res.imageUrl;
this.pushImageToEditor();
});
}
}
);
Imageinput.click();
}
SendFileToServer(file: any) {
debugger;
this._imageUploadService.uploadImageToBlob(file).subscribe((res) => {
debugger;
this._returnedURL = res.imageUrl;
this.pushImageToEditor();
});
}
pushImageToEditor() {
debugger;
const range = this.editor.getSelection(true);
const index = range.index + range.length;
this.editor.insertEmbed(range.index, 'image', this._returnedURL);
}
ngAfterViewInit() {
}
}
Here is my editor HTML -
<quill-editor #fileInput
[(ngModel)]="editorContent"
[ngModelOptions]="{standalone: true}"
(onEditorCreated)="onEditorCreated($event)"
(onContentChanged)="onContentChanged($event)"
(onSelectionChanged)="logSelection($event)"
[style]="{'height':'300px'}">
</quill-editor>
我可以在其他方法中访问this._imageUploadService
但无法在addEventListener()中访问它。任何帮助都将不胜感激
答案 0 :(得分:1)
而不是使用.bind或尝试将对象/上下文强制转换为回调,您只需使用角度Renderer2包装器即可访问Component类上下文。
imageHandler() {
debugger;
const Imageinput = this.renderer.createElement('input');
this.renderer.setAttribute(Imageinput, 'type', 'file');
this.renderer.setAttribute(Imageinput, 'accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
this.renderer.addClass(Imageinput, 'ql-image');
this.renderer.listen(Imageinput, 'change', () => {
if (Imageinput.files != null && Imageinput.files[0] != null) {
debugger;
this._imageUploadService.uploadImageToBlob(file).subscribe((res) => {
debugger;
this._returnedURL = res.imageUrl;
this.pushImageToEditor();
});
}
});
Imageinput.click();
}
答案 1 :(得分:0)
在更改事件处理程序this
中引用toolbar.addHandler
的上下文,因此您需要它来绑定this.imageHandler
这样的
onEditorCreated(quill) {
console.log(quill);
let toolbar = quill.getModule('toolbar');
toolbar.addHandler('image', this.imageHandler.bind(this)); // <--
//this.editorContent = quill;
this.editor = quill;
console.log('quill is ready! this is current quill instance object', quill);
}