2017-07-07 2 views
4

私はace editorを使用しており、エディタで自動補完を達成しようとしています。私はオプションを試してみましたが、うまく動かず、警告が表示されています。エースエディタを角2に自動完成しますか?

エースエディタコンポーネント

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> 

問題:

オートコンプリート機能していません。コンソールで

警告メッセージ

enter image description here

+1

https://stackoverflow.com/questions/24651222/misspelled-ace-editor-options ngAfterViewInit '等ngAfterViewInit'(){ \t this.editor.getEditor()はsetOptions('内部 –

+0

セットオプション{ \t \t enableBasicAutocompletion:true \t}); } ' –

+0

@Yatinpateは機能しません。ちなみにあなたの返信のおかげで –

答えて

1

この app.module.ts 0以上のため

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

をお試しください

+1

あなたは答えをもっと理解するためにもっと説明できますか? –

関連する問題