angular - ngx-Codemirror 游标无法正常工作-Angular 8

Question

我已实现 ngX-CodeMirror在我的 Angular 项目中。我在 Angular Material 模态中添加了代码编辑器。它工作正常，我无法移动光标，因此我可以单击任何文本。我可以点击一些文本，但不能点击我们打算点击的地方。
我在 stackblitz 中添加了这个问题:Code Mirror Cursor Issue
这是我的 component.html 文件中的片段

<ngx-codemirror
 #codeMirror
 [options]="codeMirrorOptions"
 [(ngModel)]="codeObj">
</ngx-codemirror>

在 component.ts 中，

import { Component, OnInit, ViewChild, ElementRef, Input } from "@angular/core";
import { CodemirrorComponent } from "@ctrl/ngx-codemirror";

export class CodeEditorComponent implements OnInit {
  @Input()
  configs: any;
  testData: any;

  @ViewChild("textArea") textArea: ElementRef; 

  codeMirrorOptions: any = {
    theme: "idea",
    mode: "application/json",
    lineNumbers: true,
    autoRefresh: true
  };

  codeObj: any;
  constructor() {}

  ngOnInit(): void {
    this.codeObj = JSON.stringify(this.configs, undefined, 2);
  }
}

我不确定为什么会发生这种情况，或者我们是否需要提供任何特定选项来查看鼠标光标。
我在 codeMirrorDiscussionForum 中看到了一个相关的查询但还没有找到解决方案。
请通过引用 stackblitz 链接帮助我解决这个问题。

Answer 1

模态打开后刷新codeMirror
modal.component.ts

import { CodemirrorComponent } from "@ctrl/ngx-codemirror";

//get a reference to the component
@ViewChild('codeMirror') private codeEditorCmp: CodemirrorComponent;

ngOnInit()
{
  //..conf and code initialisation 
  setTimeout(() => this.codeEditorCmp.codeMirror.refresh(), 1000); //<= add this

Stackblitz demo
可能的解释
我不知道 codeMirror，但它可能会根据您单击的位置计算插入符号的位置。我猜这个计算是基于当前组件的尺寸，可能会被缓存。
由于当您的模态组件初始化时，它还没有完整的宽度/高度(直到模态完全打开)，您可以在模态打开后强制代码镜像刷新。