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

Question

我在我的 Angular 项目中实现了 ngX-CodeMirror。我在一个角材料模态中添加了代码编辑器。它工作正常我无法移动光标，以便我可以单击任何文本。我可以点击一些文本，但不是我们想要的。

我在 stackblitz 中添加了这个问题：Code Mirror Cursor Issue

这是我的 component.html 文件中的 sn-p

<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，但它可能会根据您单击的位置计算插入符号的位置。我猜这个计算是基于当前组件的尺寸，可能会被缓存。

由于当您的模态组件初始化时，它还没有完整的宽度/高度（直到模态完全打开），您可以在模态打开后强制代码镜像刷新。

Answer 2

是的，我也会等到模式打开，因为代码镜像区域的大小正在通过 Angular 材质动画进行更改：

dialog.component.ts

export class ExampleModalComponent implements OnInit {
  opened$ = this.dialogRef.afterOpened().pipe(mapTo(true));

dialog.component.html

<ngx-codemirror *ngIf="opened$ | async else loading"
....


<ng-template #loading>Loading...</ng-template>

Forked Stackblitz

另一种解决方案是禁用动画。