monaco editor 的 renderSideBySide 设置不起作用
0
悬赏园豆：30[已解决问题] 解决于 2024-04-12 21:02 
在一个 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));
}
最佳答案
0
终于解决了，将 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>