ngx-monaco-editor 第一次加载需要一段时间

Question

我能够将 ngx-monaco-editor 与我的 Angular 8 应用程序集成。 我遇到的一个问题是 - 当我第一次打开带有某些内容的编辑器时，需要 3-4 秒。 这是一个相对较长的时间，用户可能认为应用程序没有响应。

我不确定是什么导致了这个问题。 根据其他帖子，它可能与下载 editor.main.js 有关。 有没有办法提前触发 ngx-monaco-editor 加载/设置，所以当用户打开内容时，它会立即在模式窗口中加载编辑器。

摩纳哥组件 -

html

<div style="height: 100%">
   <ngx-monaco-editor [options]="Options" [(ngModel)]="Code" ></ngx-monaco-editor>
</div>

TS

import { Component, Input } from '@angular/core';

@Component({
   selector: 'monaco-component',
   templateUrl: './monaco.component.html',
   styleUrls: ['./monaco.component.scss']
})
export class monacoimplements {
   @Input() Code: any;
   private Options = {theme: 'vs', language: 'xml', };
   constructor() { }
}

Answer 1

这个例子需要一个 NgxLoadingModule

npm install --save ngx-loading

从 'ngx-loading' 导入 { NgxLoadingModule };

让 your-component.html 像这样

...
  <div style=" position:relative; height:200px;">
    <ngx-monaco-editor style="height:100%;" [options]="editorOptions" (onInit)="onMonacoEditorInit($event)"></ngx-monaco-editor>
    <ngx-loading [show]="loading"></ngx-loading>
  </div>
...

让你的component.ts像这样

...
  editorOptions = { theme: 'vs-dark', language: 'html' };

  constructor(
    private changeDetectorRef: ChangeDetectorRef
  ) {
    
    });

  onMonacoEditorInit(): void {
    this.loading = false;
    this.changeDetectorRef.detectChanges();
  }
...