Angular 9中使用monaco-editor如何捕获和处理代码错误

angular-monaco-editor 封装的是原生 Monaco Editor 核心能力，编辑器本身没有提供专门的「错误触发」事件，所有语法、语义错误都会以诊断标记（Marker）的形式存储在编辑器模型中，你可以通过监听全局标记变更事件来实时捕获错误。

核心实现步骤 #

• 首先在编辑器初始化回调中拿到编辑器实例
• 绑定onDidChangeMarkers全局事件，筛选当前编辑器模型对应的错误标记
• 实时存储错误列表，在用户触发保存时先校验错误列表是否为空

完整代码示例 #

import { Component, OnDestroy } from '@angular/core';
import * as monaco from 'monaco-editor';

@Component({
  selector: 'app-code-editor',
  template: `
    <ngx-monaco-editor 
      [options]="editorOptions" 
      [(ngModel)]="code" 
      (onInit)="onEditorInit($event)"
    ></ngx-monaco-editor>
    <button (click)="handleSave()">保存代码</button>
  `
})
export class CodeEditorComponent implements OnDestroy {
  // 编辑器基础配置，可根据实际需求调整语言、主题等
  editorOptions = { theme: 'vs-dark', language: 'javascript' };
  code = 'function hello() { console.log("hello world") }';
  private editor: monaco.editor.IStandaloneCodeEditor;
  // 存储当前代码的错误列表
  private currentCodeErrors: monaco.editor.IMarker[] = [];
  // 事件监听销毁句柄
  private markerListener: monaco.IDisposable;

  onEditorInit(editor: monaco.editor.IStandaloneCodeEditor): void {
    this.editor = editor;
    // 监听全局诊断标记变更事件
    this.markerListener = monaco.editor.onDidChangeMarkers((changedUris) => {
      const currentModelUri = this.editor.getModel()?.uri;
      // 只处理当前编辑器模型的变更
      if (!currentModelUri || !changedUris.includes(currentModelUri)) return;
      // 获取当前模型的所有诊断标记
      const allMarkers = monaco.editor.getModelMarkers({ resource: currentModelUri });
      // 仅筛选错误级别的标记，可根据需求调整包含警告、提示等
      this.currentCodeErrors = allMarkers.filter(
        marker => marker.severity === monaco.MarkerSeverity.Error
      );
    });
  }

  handleSave(): void {
    // 存在错误时阻止保存
    if (this.currentCodeErrors.length > 0) {
      alert(`代码存在${this.currentCodeErrors.length}处错误，请修正后再提交`);
      return;
    }
    // 校验通过，执行你的保存逻辑
    console.log('代码校验通过，保存内容：', this.code);
  }

  ngOnDestroy(): void {
    // 组件销毁时取消事件监听，避免内存泄漏
    this.markerListener?.dispose();
  }
}

补充说明 #

• 如果你使用非JavaScript/TypeScript的其他编程语言，需要确保Monaco已加载对应语言的语言服务/语法校验插件，否则无法自动生成错误标记
• MarkerSeverity枚举对应级别：8=错误，4=警告，2=信息，1=提示，你可以根据业务需求调整筛选逻辑
• 如果需要自定义校验规则，可以主动调用monaco.editor.setModelMarkers给当前模型添加自定义错误标记，同样会被上述监听事件捕获

内容的提问来源于stack exchange，提问作者Majd Mn