首页 新闻 会员 周边

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));
}
dudu的主页 dudu | 高人七级 | 园豆:30948
提问于:2024-04-10 18:02

竟然与 ng-zorro 的 grid 栅格布局有关

dudu 3周前
< >
分享
最佳答案
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>
dudu | 高人七级 |园豆:30948 | 2024-04-12 20:57
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册