Skip to content

Commit

Permalink
fix(module:code-editor): always initialize outside of the Angular zone (
Browse files Browse the repository at this point in the history
  • Loading branch information
arturovt committed Jan 13, 2022
1 parent c20bb80 commit f73be80
Showing 1 changed file with 29 additions and 14 deletions.
43 changes: 29 additions & 14 deletions components/code-editor/code-editor.component.ts
Expand Up @@ -104,7 +104,11 @@ export class NzCodeEditorComponent implements OnDestroy, AfterViewInit {
if (!this.platform.isBrowser) {
return;
}
this.nzCodeEditorService.requestToInit().subscribe(option => this.setup(option));

this.nzCodeEditorService
.requestToInit()
.pipe(takeUntil(this.destroy$))
.subscribe(option => this.setup(option));
}

ngOnDestroy(): void {
Expand Down Expand Up @@ -144,19 +148,30 @@ export class NzCodeEditorComponent implements OnDestroy, AfterViewInit {
}

private setup(option: JoinedEditorOptions): void {
inNextTick().subscribe(() => {
this.editorOptionCached = option;
this.registerOptionChanges();
this.initMonacoEditorInstance();
this.registerResizeChange();
this.setValue();

if (!this.nzFullControl) {
this.setValueEmitter();
}

this.nzEditorInitialized.emit(this.editorInstance!);
});
// The `setup()` is invoked when the Monaco editor is loaded. This may happen asynchronously for the first
// time, and it'll always happen synchronously afterwards. The first `setup()` invokation is outside the Angular
// zone, but further invokations will happen within the Angular zone. We call the `setModel()` on the editor
// instance, which tells Monaco to add event listeners lazily internally (`mousemove`, `mouseout`, etc.).
// We should avoid adding them within the Angular zone since this will drastically affect the performance.
this.ngZone.runOutsideAngular(() =>
inNextTick()
.pipe(takeUntil(this.destroy$))
.subscribe(() => {
this.editorOptionCached = option;
this.registerOptionChanges();
this.initMonacoEditorInstance();
this.registerResizeChange();
this.setValue();

if (!this.nzFullControl) {
this.setValueEmitter();
}

if (this.nzEditorInitialized.observers.length) {
this.ngZone.run(() => this.nzEditorInitialized.emit(this.editorInstance!));
}
})
);
}

private registerOptionChanges(): void {
Expand Down

0 comments on commit f73be80

Please sign in to comment.