首页 新闻 会员 周边

monaco editor 的 diff editor 在首次加载时 goToDiff 的问题

0
悬赏园豆:30 [已解决问题] 解决于 2024-04-13 21:26

在一个 angular 17 项目中遇到的问题,monaco-editor 版本是 0.47.0,monaco-editor 是通过 ngx-monaco-editor-v2 加载的,实现的功能是在 diff editor 加载完成后自动定位至第一个 diff 所在的位置

目前是用下面的代码实现的

onDiffEditorInitialized(editor: monaco.editor.IStandaloneDiffEditor) {
    this._diffEditor = editor;
    this._zone.run(() => {
        setTimeout(() => {
            this._diffEditor?.goToDiff('next');
        }, 20);
    });
}

如果不是第一次加载,上面的代码可以起作用,但第一次加载时,加载时间比较长,加载完成后并没有定位至第一个 diff 所在的位置,请问如何解决这个问题?

dudu的主页 dudu | 高人七级 | 园豆:31048
提问于:2024-04-13 09:24

ngx-monaco-editor-v2 是在 ngAfterViewInit 时加载 monaco-editor 的

dudu 3个月前
< >
分享
最佳答案
0

第一次加载时没有定位到第一个 diff 是因为执行 goToDiff 时 diff 还没计算好,需要在 onDidUpdateDiff 中调用 goToDiff 才行

this._diffEditor?.onDidUpdateDiff(() => {
    this._diffEditor?.goToDiff('next');
});

但如果只在 onDidUpdateDiff 调用 goToDiff,当 _diffEditor 的内容没有变化时就不会定位到第一个 diff

后来发现 monaco editor 已经考虑到了这个问题,提供了专门的 revealFirstDiff 方法

/**
 * Scrolls to the first diff.
 * (Waits until the diff computation finished.)
 */
revealFirstDiff(): unknown;

改为调用这个方法就完美解决了

this._diffEditor?.revealFirstDiff();
dudu | 高人七级 |园豆:31048 | 2024-04-13 21:13
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册