javascript - 如何从 AgEditorComponent 的上下文中聚焦 ag-grid Angular 中的下一个单元格

Question

我有一个自定义叠加层(来自“@angular/cdk/overlay”的 OverlayModule)，在为 Angular 编辑 Ag-Grid 中的单元格时打开。

用户可以在叠加层中很好地关注 MatInput。但现在焦点位于网格单元格流之外的输入上，因此当用户点击“选项卡”时，默认行为将聚焦地址栏。

我可以通过以下方式防止这种行为。

fromEvent(this.tabOutInput.nativeElement, 'keydown')
      .pipe(
            takeUntil(this._destroy)
           )
      .subscribe((event: KeyboardEvent) => {
        if(event.keyCode === TAB) {
          event.preventDefault();
          // TODO: figure out how to focus the next cell
        }
      });

但是如何让下一个单元格聚焦？我查看了文档，tabToNextCell 和 navigateToNextCell 似乎是选项，但我不希望此单元格的用户必须配置他们的模板，这些方法已绑定(bind)。

ICellEditorParams 是否可以使用 GridApi 导航到下一个单元格？

agInit(params: ICellEditorParams): void {}

请帮忙!

Answer 1

卫生部!我想出了问题是什么。有些元素劫持了选项卡索引。此页面上有多个网格，this.params.api 引用的是最后一个网格，而不是我正在使用的网格。我在当天早些时候尝试了 this.params.api.tabToNextCell() 但它没有用，它在另一个网格之间不规则地切换，这是页面上的第一个输入。我只需要弄清楚如何正确传递上下文以使多个网格正常工作。

fromEvent(this.tabOutInput.nativeElement, 'keydown')
      .pipe(
            takeUntil(this._destroy)
           )
      .subscribe((event: KeyboardEvent) => {
        if(event.keyCode === TAB) {
          event.preventDefault();
          this.params.api.tabToNextCell(); <-- this does work with 1 grid on the page
        }
      });