如何在 element<ngx-monaco-diff-editor> 上使用 javascript 在滚动时加载文件？答案

【问题标题】：How to load file on scroll using javascript on element<ngx-monaco-diff-editor>?如何在 element<ngx-monaco-diff-editor> 上使用 javascript 在滚动时加载文件？
【发布时间】：2021-08-10 20:09:12
【问题描述】：

我已经尝试了一个多星期，但未能以角度实现它。有人可以看看吗？

onContainerScroll() 永远不会被调用，我想知道如何使用 javascript、滚动此元素以及到达下一个范围的底部调用 API？

<ngx-monaco-diff-editor id="diffeditor" [options]="diffOptions" [originalModel]="originalModel" #elm
[modifiedModel]="modifiedModel" (scroll)="onContainerScroll($event)">
</ngx-monaco-diff-editor>

@ViewChild('elm', { read: ElementRef }) elm: ElementRef;
ngAfterViewInit() {
console.log(this.elm.nativeElement)  //return the ngx element
}

【问题讨论】：

你可以通过ViewChild获取对编辑器的引用来解决它...它可能会暴露一些你可能需要的事件。
显示未定义
你可以在ngAfterViewInit被调用之后或者之后使用它
我可以获取元素但如何从中获取滚动事件？基本上，我想检测它何时到达底部并调用 API ...
您不想获取 HTLM 元素，而是获取组件以访问它可能为您提供的内容。

标签： javascript angular ajax ngx-monaco-editor

【解决方案1】：

您想获得对DiffEditorComponent 的引用，然后

<ngx-monaco-diff-editor
  id="diffeditor"
  [options]="diffOptions"
  [originalModel]="originalModel"
  [modifiedModel]="modifiedModel">
</ngx-monaco-diff-editor>

@ViewChild(DiffEditorComponent) diffEditor: DiffEditorComponent;
ngAfterViewInit() {
  console.log(diffEditor._editorContainer); // HTMLElement that might be scrolled
}

您将不得不深入挖掘，但这是一个合理的开始。

【讨论】：