如何解决如何将ngx-monaco-editor包装在ControlValueAccessor组件中
我试图将ngx-monaco-editor github用于简单的faas应用程序,并试图使其在FormGroup中使用。
这是我的组件的样子:
@Component({
selector: 'app-editor-wrapper',template: `<ngx-monaco-editor [options]="editorOptions" [(ngModel)]="value" ></ngx-monaco-editor>`,styleUrls: ['./editor-wrapper.component.scss'],providers: [
{
provide: NG_VALUE_ACCESSOR,useExisting: forwardRef(() => EditorWrapperComponent),multi: true
}
]
})
export class EditorWrapperComponent implements ControlValueAccessor,AfterViewInit {
@ViewChild(EditorComponent) editorComponent: EditorComponent;
editorOptions: any;
value: string;
disabled: boolean;
constructor() { }
ngAfterViewInit(): void {
console.log(this.editorComponent);
}
//#region ControlValueAccessor
writeValue(obj: any): void {
this.value = obj;
// this.editorComponent is undefined
this.editorComponent.writeValue(obj);
}
onChange: () => {};
registerOnChange(fn: any): void {
this.onChange = fn;
// this.editorComponent is undefined
this.editorComponent.registerOnChange(fn);
}
onTouched: () => {};
registerOnTouched(fn: any): void {
this.onTouched = fn;
// this.editorComponent is undefined
this.editorComponent.registerOnTouched(fn);
}
setdisabledState?(isdisabled: boolean): void {
this.disabled = isdisabled;
}
//#endregion
ngAfterViewInit(): void {
// this works fine
console.log(this.editorComponent);
}
}
并且我收到以下错误:
我正在尝试执行此操作,以便可以在附加了formControlName的表单中使用EditorWrapperComponent,但无法找出解决方法。如果这不是在表单中使用ngx-monaco-editor的正确方法,那么我会提出建议。
解决方法
我想我明白了。似乎所需要做的就是
ngAfterViewInit(): void {
this.editorComponent.registerOnChange(this.onChange);
this.editorComponent.registerOnTouched(this.onTouched);
}
this.onChange和this.onTouched是我存储ControlValueAccessor提供的onTouched和onChange函数的变量。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。