Ace Editor automatische Vervollständigung in Angular 2?

Question

Ich benutze ace editor und versuche, Auto-Vervollständigung im Editor zu erreichen. Ich habe versucht mit Optionen, aber es funktioniert nicht und ich bekomme Warnungen. Irgendeine Idee?

Ace Editorkomponente

import { 
    Component, EventEmitter, Input, OnInit, Output, ViewChild 
} from '@angular/core'; 

@Component({ 
    selector: 'neon-ace-editor', 
    templateUrl: './ace-editor.component.html', 
    styleUrls: ['./ace-editor.component.scss'] 
}) 
export class AceEditorComponent implements OnInit { 
    @Input() mode = 'html'; 
    @Input() autoUpdateContent = true; 
    @Input() content: string; 
    @Output() onContentChange: EventEmitter<string> = new EventEmitter(); 
    @ViewChild('editor') editor; 
    options = { 
     enableBasicAutocompletion: true, 
     enableSnippets: true, 
     enableLiveAutocompletion: true 
    }; 
    ngOnInit(): void { 
     this.editor._editor.$blockScrolling = Infinity; 
    } 

    onContentChanging(): void { 
     this.onContentChange.emit(this.content); 
    } 
} 

Ace Editor Html

<ace-editor [(text)]="content" 
      #editor 
      (textChanged)="onContentChanging()" 
      [options]="options" 
      [autoUpdateContent]="autoUpdateContent" 
      style="min-height: 500px; width:100%; font-size:18px;overflow: auto;" 
      [mode]="mode"></ace-editor> 

Ausgabe:

Auto-complete funktioniert nicht.

Warnmeldungen in der Konsole

Answer 1

Versuchen Sie, diese app.module.ts

imports: [ 
    ..., 
    AceEditorModule // import AceEditorModule 
    ] 

app.component.ts

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

import 'brace'; 
import 'brace/ext/language_tools'; 
import 'ace-builds/src-min-noconflict/snippets/html'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements OnInit { 
    text = ''; 
    @ViewChild('editor') editor; 
    options: any = { 
    enableBasicAutocompletion: true, 
    enableSnippets: true, 
    enableLiveAutocompletion: true, 
    }; 

    ngOnInit() { 
    // disable Automatically scrolling cursor into view after selection change warning 
    this.editor.getEditor().$blockScrolling = Infinity; 
    } 
} 
app.component.html 

<ace-editor 
    theme="monokai" 
    mode="html" 
    [options]="options" 
    #editor 
    style=" min-height: 600px; width:100%;overflow: auto;" 
> 
</ace-editor> 
.angular-cli.json 

"scripts": [], 

für mehr discusstion