Question

我试图通过点击按钮动态地将ace编辑器加载到我的angular2应用程序中，但看起来ace编辑器在控制台上产生以下错误：

错误：ace.edit无法找到div #editor

以下是一个示例代码：

main.ts

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';

@Component({
  selector: 'app',
  template: `<div [innerHTML]="html" ></div>
  <button class="btn btn-primary" (click)="addAce()" >Add Ace</button>`
})
class MainApp{

  public html = "";

  constructor(){}

  addAce(){

    this.html = "<pre style='height:100vh' id='editor' ></pre>";

    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/twilight");
    editor.getSession().setMode("ace/mode/javascript");
  }
}
bootstrap(MainApp);

我希望这段代码完全适用于这个位置。为什么ace编辑器找不到我给pre标签的id？在引导应用程序后，我可以在源代码中看到editor id。我重新制作了问题here on plunkr。您可以监视控制台以查找错误消息。感谢您的期待。

更新

我试过这样做

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';

@Component({
  selector: 'app',
  template: `<button class="btn btn-primary" (click)="addAce()" >Add Ace</button>
  <div><pre style='height:100vh' id='editor' ></pre></div>`
})
class MainApp{
  public aceId = "";

  constructor(){}

  addAce(){

    this.aceId = "editor";

    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/twilight");
    editor.getSession().setMode("ace/mode/javascript");
  }
}
bootstrap(MainApp);

但仍然没有运气。

Answer 1

当我正在玩的时候，我认为可能是ace编辑器太快，在角度2操纵DOM之前检查id：P。所以我尝试了setTimeout函数并尝试在setTimeout回调函数中创建ace编辑器并猜测是什么？有效。这是工作代码

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';

@Component({
  selector: 'app',
  template: `<button class="btn btn-primary" (click)="addAce()" >Add Ace</button>
  <div><pre style="height:100vh;" [id]="aceId" ></pre></div>`
})
class MainApp{
  public aceId = "";

  constructor(){}

  addAce(){

    this.aceId = "editor";

    setTimeout(function(){
      var editor = ace.edit("editor");
      editor.setTheme("ace/theme/twilight");
      editor.getSession().setMode("ace/mode/javascript");
    },0);
  }
}
bootstrap(MainApp);

和here is plunkr

Answer 2

我认为这可能有问题，因为您没有正确完成HTML，期望ID为editor的div，如下所示：

 <div id="editor" ace-editor [(text)]="text" style="height:150px;">

Angular2 - 动态加载Ace编辑器

2 个答案: