Question

我有以下滚动div，我想在按向上和向下箭头键时滚动。问题是当选择超出视图时我想相应地滚动div。我为div元素添加了一个[focused]属性，仅用于演示目的，我希望我可以通过Angular2数据绑定到一个聚焦属性。

<div class="scrolling-div">
    <div *ngFor="let item of Items; let i = index" [focused]="i === currentIndex">
         {{item.title}}
    </div>
</div>

一旦我检测到箭头按键，currentIndex就会递增或递减。问题是我想将焦点设置为当前项目，以便div得到相应的滚动。

有没有办法将每个项目绑定到焦点，以便滚动到视图中？也许这个问题有不同的解决方案。

Answer 1

这是一个focused指令的例子，它将完成这项工作：

import {Directive, Input, Renderer, ElementRef} from '@angular/core'

@Directive({
  selector: '[focused]'
})
export class FocusedDirective {
  @Input()
  set focused(value: boolean){
    if(value){
      this.renderer.invokeElementMethod(this.elementRef.nativeElement, 'scrollIntoViewIfNeeded');
    }
  }

  constructor(private elementRef: ElementRef, private renderer: Renderer){}
}

如果您希望它滚动到顶部（而不仅仅是可见），请将scrollIntoViewIfNeeded替换为scrollIntoView。

这是一个非常基本的工作示例的plnkr。请注意，我没有进行范围检查等，只显示了基本功能

在按键上将div项目滚动到视图中

1 个答案: