Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(module:code-editor): always initialize outside of the Angular zone #7151

Merged
merged 1 commit into from Jan 13, 2022
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
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