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();
  }
...