php ace动态加载菜单,javascript – Angular2 – 动态加载Ace编辑器

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

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

这是一个示例代码：

main.ts

import {Component} from 'angular2/core';

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

@Component({

selector: 'app',

template: `

Add Ace`

})

class MainApp{

public html = "";

constructor(){}

addAce(){

this.html = "

";

var editor = ace.edit("editor");

editor.setTheme("ace/theme/twilight");

editor.getSession().setMode("ace/mode/javascript");

}

}

bootstrap(MainApp);

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

更新

我试过这样做

import {Component} from 'angular2/core';

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

@Component({

selector: 'app',

template: `Add Ace

})

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

但仍然没有运气.

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

import {Component} from 'angular2/core';

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

@Component({

selector: 'app',

template: `Add Ace

})

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