ACE編輯器自動完成到Angular 2中？

Question

我正在使用ace editor並試圖在編輯器中實現自動完成。我試着選擇，但它不工作，我得到警告。任何想法？

王牌編輯器組件

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); 
    } 
} 

王牌編輯器的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> 

問題：

自動完成不工作。

在控制檯的警告消息

Answer 1

試試這個 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": [], 

更多discusstion