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

Question

我已经在我的 angular 项目中实现了 ngX-CodeMirror。我在 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 帮助我解决这个问题 link。

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

因为当你的模态组件初始化时它还没有完整的width/height（直到模态完全打开），你可以在模态打开后强制代码镜像刷新。

Answer 2

是的，我也会等到模式打开，因为代码镜像区域的大小正在改变Angular material动画：

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

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

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

ngx-Codemirror cursor is not working correctly-Angular 8

codemirror

typescript

angular

ngx-codemirror