摩纳哥编辑器以角度动态调整大小

Question

我的疑问

我已经创建了 monaco代码编辑器作为有角度的自定义组件。我想使该组件具有响应性。

我在某些测试组件（考虑父级）中渲染编辑器组件（考虑子级）。

如果我增加测试组件的宽度和高度，那时候它将调用一个函数并触发自定义事件。

引发自定义事件

var codeEditorResizeEvent = new CustomEvent("codeEditorResize", { 'detail': component });
document.body.dispatchEvent(codeEditorResizeEvent);

摩纳哥代码编辑器组件捕获该事件，如下所示：

fromEvent(document.body, 'codeEditorResize').subscribe(res => {
     console.log("*************", res) //statement exicuted on firing some button from other component
     //resize monaco editor here
});

我也想调整 monaco代码编辑器（自定义组件）的大小。

如何动态调整大小？

---

我的代码编辑器组件：

组件类

export class CodeEditorComponent implements OnInit {
  editorOptions = { theme: 'vs-dark', language: 'javascript' };
  
  constructor() {}

  ngOnInit() {

   //register custom event browser level and catching the event 
   fromEvent(document.body, 'codeEditorResize').subscribe(res => {
       console.log("*************", res) //statement exicuted on firing some button from other component
       //resize monaco editor here
   });
}


loadTypes(event?: any) {
    const monaco = (<any>window).monaco;
    const typeFiles: string[] = [
      'person.d.ts',
      'app-session.ts',
      'apptor-form.ts'
    ];

    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
        noLib: true,
        allowNonTsExtensions: true
    });
 
}

角部分

<ngx-monaco-editor style="height:100%" [options]="editorOptions" #editor [(ngModel)]="code" (onInit)="loadTypes($event)"></ngx-monaco-editor> 

测试组件

（正在从其他组件触发事件）

resize(component: any) {
  var codeEditorResizeEvent = new CustomEvent("codeEditorResize", { 'detail': component });
  document.body.dispatchEvent(codeEditorResizeEvent);
}