ace.edit在mat-tab中找不到div＃javascript-editor

Posted 2021-05-07

我正在尝试创建一个ace编辑器，当在角形材质中使用该编辑器时会抛出错误

ace.edit找不到div＃javascript-editor

我在这里有我的代码StackBlitz（检查控制台中的错误）

app.component.html

<mat-tab-group>
  <mat-tab label="Editor">
    <h4>Custom Editor</h4>
    <div id="javascript-editor" style="height: 300px;"></div>
  </mat-tab>
</mat-tab-group>

app.component.ts

import { Component, OnInit } from '@angular/core';

import * as ace from 'brace';
import 'brace/mode/javascript';
import 'brace/theme/monokai';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  ngOnInit() {
    const editor = ace.edit('javascript-editor');
    editor.getSession().setMode('ace/mode/javascript');
    editor.setTheme('ace/theme/monokai');
  }
}

答案

[您尚未创建javascript-editor元素时正在调用ace.edit，请尝试从ngAfterViewInit而不是ngOnInit调用它。