1

我的怀疑

我创建了一个monaco 代码编辑器作为 Angular 自定义组件。我想让这个组件响应。

我在某些测试组件（考虑父组件）中呈现编辑器组件（考虑子组件）。

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

引发自定义事件

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

Monaco 代码编辑器组件像这样捕获该事件：

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

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

我怎样才能使这个动态调整大小？

我的代码编辑器组件：

组件类

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);
}
4

0 回答 0