ace.edit не может найти div # javascript-editor в mat-tab - PullRequest
Новая
       38

ace.edit не может найти div # javascript-editor в mat-tab

2 голосов
/ 07 октября 2019

Я пытаюсь создать редактор 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');
  }
}

1 Ответ

1 голос
/ 08 октября 2019

Вы вызываете ace.edit, когда элемент javascript-editor еще не создан, попробуйте вызвать его из ngAfterViewInit вместо ngOnInit.

...