在一个 angular 项目中,从 angular 15 升级到 angular 17 后遇到的问题,下面的代码中设置 renderSideBySide 为 true 对 monaco editor 不起作用,总是在一个编辑器中显示 diff,monaco editor 是通过 ngx-monaco-editor-v2 的 ngx-monaco-diff-editor 加载的
onDiffEditorInitialized(editor: monaco.editor.IStandaloneDiffEditor) {
this._preferenceChangeSubscription?.unsubscribe();
this._preferenceChangeSubscription = this._preferenceManager.preferenceChange
.pipe(
this._rxHelper.autoUnsubscribe,
map(
({ sideBySide }): Partial<monaco.editor.IDiffEditorOptions> => ({
renderSideBySide: sideBySide,
})
)
)
.subscribe(opt => editor.updateOptions(opt));
this._diffEditor = editor;
this._zone.run(() => (this.hasDiffEditorInitialized = true));
}
终于解决了,将 nzFlex="auto"
改为 nzFlex="82%"
即可,开始怎么也没想到是这个地方引起的
改为 nzFlex="80%"
也不行,看来 monaco editor 使用 renderSideBySide 对最低宽度要求,82%
对应的是 905px
<div nz-row class="commits-explorer__content">
<div nz-col nzFlex="22%">
</div>
<div nz-col>
<nz-divider nzType="vertical" class="h-100"></nz-divider>
</div>
<div nz-col nzFlex="82%">
<ng-container *ngIf="selectedCommit">
<!-- monaco editor 是在这里加载的 -->
</ng-container>
</div>
</div>
竟然与 ng-zorro 的 grid 栅格布局有关
– dudu 8个月前