javascript - Angular2 - 动态加载 Ace 编辑器

Question

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

Error: ace.edit can't find div #editor

这是一个示例代码:

ma​​in.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 editor 找不到我给 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 编辑器太快了，无法在 angular 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