我如何从Monaco代码编辑器运行代码?

时间:2019-04-19 07:21:35

标签: angular typescript monaco-editor

我尝试在Angular 6上构建类似freecodecamp的东西并将其添加到我的项目monaco code editor中,但是现在我只能保存代码,不能运行。

我希望能够将代码执行的结果保存到变量中,以便比较正确答案和答案以及用户编写的内容。

我认为我可以使用WebWorkers来执行该代码,但是如何?

组件模板:

<ngx-monaco-editor
    [options]="editorOptions"
    [(ngModel)]="code">
</ngx-monaco-editor>
<button
    (click)="clickSave()"
    color="primary"
    mat-raised-button>
    Save

</button>

和班级:

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

@Component({
    selector: 'app-code-editor',
    templateUrl: './code-editor.component.html',
    styleUrls: ['./code-editor.component.sass'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CodeEditorComponent implements OnInit {
    @Input() theme: string;
    @Input() language: string;
    public editorOptions;
    public code = ``;

    ngOnInit(): void {
        this.fillEditorOptions();
    }

    public clickSave(): void {
        localStorage.code = JSON.stringify(this.code);
    }

    private fillEditorOptions(): void {
        this.editorOptions = {
            theme: this.theme,
            language: this.language,
        };
    }

}

0 个答案:

没有答案