Monaco 编辑器隐藏起来，直到我打开我的开发工具

Question

我有一个 HTML 文件，其中集成了摩纳哥编辑器。但最初当我加载页面时，编辑器似乎被卡住了。只有当我打开我的开发工具时，编辑器才开始工作，如果我不打开我的开发工具，它就会卡住。这是我正在使用的 HTML 代码：

                        <div class="condition-label">Condition</div>
                        <ngx-monaco-editor 
                        [ngClass]="{'error-border' : errorMessage.emptyExpression}"
                        [value]="userInput.textChange" 
                        [options]="options" 
                        [(ngModel)]="userInput.textChange" 
                        (onInit)="onInit()"
                        ></ngx-monaco-editor>
                        <ngx-loading [show]="monacoLoader"></ngx-loading>
                        <div *ngIf="errorMessage?.emptyExpression" class="error-on-empty-condition"><nile-icon name="info" size="14px" color="var(--nile-colors-red-700)"></nile-icon>This field cannot be left blank</div>
                       
                    </div>

这是我的 TS 选项代码：

public options = {
        theme : 'vs',
        language : 'javascript',
        fontSize: "14px",
        wordWrap: 'on',
        lineNumbers: "on",
        minimap: {
            enabled: false
        }
    }
    monacoLoader = false;

    onInit(){
        this.monacoLoader = false;
    }
    logger(){
        this.monacoLoader = false;
        this.cdr.detectChanges();
    }

我不明白为什么会发生这种情况。有什么解决办法吗？

Answer 1

你说你有一个 HTML 文件。从本地 HTML 文件加载进行测试时，JavaScript 将不会启动，除非您打开开发工具控制台。

如果这是一个问题，您可以在本地提供文件，就像使用 Web 服务器一样。为此有几种工具。我使用

python

或

php

网络服务器。

python3 -m http.server

php -S localhost:8000

然后就可以用浏览器查看页面了。

htmlview http://localhost:8000