如何在Monaco编辑器中使用代码片段/自动完成功能？

Question

嘿，我正尝试与摩纳哥编辑使用倾斜的片段，但是我无法以某种方式归档它。我查看了此example，但我不知道将这些功能放在哪里可以使它工作。

createDependencyProposals(): any {
        return [
            {
                label: '"lodash"',
                kind: monaco.languages.CompletionItemKind.Function,
                documentation: "The Lodash library exported as Node.js modules.",
                insertText: '"lodash": "*"'
            },
        ];
    }

monaco.languages.registerCompletionItemProvider('json', {
            provideCompletionItems: (model, position) => {
                const textUntilPosition: string = model.getValueInRange({ startLineNumber: 1, startColumn: 1, endLineNumber: position.lineNumber, endColumn: position.column });
                const match: RegExpMatchArray = textUntilPosition.match(this.code);
                const suggestions: any = match ? this.createDependencyProposals() : [];
                return {
                    suggestions: suggestions
                };
            },
        });

我的T​​ypeScript和html代码

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

@Component({
    selector: 'app-monaco-editor',
    templateUrl: './monaco-editor.component.html',
    styleUrls: ['./monaco-editor.component.css'],
})

export class MonacoEditorComponent {
    code: string ;
    constructor() {
    }

    editorOptions: any = {
        theme: 'vs-light', language: 'python',
    };

    setCode(code: string): void {
        this.code = code;
    }
}

<div style="height: 500px">
  <ngx-monaco-editor style="height: 100%" [options]="editorOptions" [(ngModel)]="code"></ngx-monaco-editor>
</div>

Answer 1

找到了解决方案。如果将其放在app.module.ts中，它可以工作，但正常的自动完成功能将不再起作用。

const monacoConfig: NgxMonacoEditorConfig = {
    baseUrl: 'assets',
    defaultOptions: { scrollBeyondLastLine: false },
    onMonacoLoad: () => {
        const monaco: any = (window as any).monaco;
        console.log(monaco);
        monaco.languages.registerCompletionItemProvider('python', {
            provideCompletionItems: (model, position) => {
                const textUntilPosition: string = model.getValueInRange({ startLineNumber: 1, startColumn: 1, endLineNumber: position.lineNumber, endColumn: position.column });
                const match: RegExpMatchArray = textUntilPosition.match('');
                const  suggestions: any = match ? createDependencyProposals() : [];
                return { suggestions };
            },
        });

        function createDependencyProposals() {
            return [
                {
                    label: '"lodash"',
                    kind: monaco.languages.CompletionItemKind.Function,
                    documentation: "The Lodash library exported as Node.js modules.",
                    insertText: '"lodash": "*"'
                }
            ];
        }
    }

将此代码放入应用模块的导入中

MonacoEditorModule.forRoot(monacoConfig),