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

Question

我正在尝试创建一个 ace 编辑器，该编辑器在角材料中使用时会引发错误

ace.edit 找不到 div #javascript-editor

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

应用程序组件.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。