首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在ControlValueAccessor组件中包装ngx-monaco editor

如何在ControlValueAccessor组件中包装ngx-monaco editor
EN

Stack Overflow用户
提问于 2020-08-16 20:00:26
回答 1查看 573关注 0票数 1

我正在尝试为一个简单的faas应用程序使用ngx-monaco-editor github,并尝试在FormGroup中使用它。

下面是我的组件的外观:

代码语言:javascript
运行
复制
@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的正确方式,我会接受建议。

EN

回答 1

Stack Overflow用户

发布于 2020-08-16 23:39:03

我想我想通了。看起来所有需要做的就是

代码语言:javascript
运行
复制
    ngAfterViewInit(): void {
        this.editorComponent.registerOnChange(this.onChange);
        this.editorComponent.registerOnTouched(this.onTouched);
    }

this.onChange和this.onTouched是存储ControlValueAccessor提供的onTouched和onChange函数的变量。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/63436629

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档