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

Question

我正在尝试创建一个 ace 编辑器，当在 Angular Material 中使用时会抛出错误

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 调用它。