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

Question

我正在尝试创建一个在 angular material

中使用时抛出错误的 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');
  }
}

Answer 1

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