代码之家 › 专栏 › 技术社区 › AlexFF1

角度4聚焦箭头向下的项目并滚动

keyboard-events typescript angular css javascript

5

AlexFF1 · 技术社区 · 8 年前

我在div*ngFor循环中有一些项,它在所选消息上应用css类“message list active”。

应用程序。html

 <div  id="listText" *ngFor="let message of messages; let i=index" activeIndex = i" 
   [ngClass]="{'message-list-active': activeIndex === i  }">
      {{message.name}}
 </div>

组成部分ts//使用上下箭头选择消息,监听键盘事件

  messages;  // we have date stored here
  activeIndex = 0;


  @HostListener("document:keydown", ['$event']) 
   doSomething(event: KeyboardEvent): void {


  if (event.code == "ArrowUp" && this.activeIndex > 0) {
    this.activeIndex--

   }
  if (event.code == "ArrowDown" && this.activeIndex < this.messages.length-1) {
    this.activeIndex++

  }
 }

应用程序。css

    #listText {
        width: auto;
        height:100%;
        overflow: auto
      }

     .message-list-active {
        margin: 0;
        padding: 15px 15px 5px 13px;
        border-radius: 0;
        background-color: #CDE6F7;
        border-style: dotted;
        border-width: 1px;
        border-bottom: 1px dotted;
         }

问题是,当所选消息到达列表末尾时,它不会滚动。因此,我试图实现的是使所选项目始终集中,并能够向下和向上滚动:

此处也有类似示例:

以下是我试图实现的目标,这是使用jquery JSFIDLE回答的 http://jsfiddle.net/38zR3/42/ , similar question/answer 但是如何在Angular 4中使用typescript实现这一点呢

2 回复 | 直到 8 年前

1

2

Swoox 8 年前

它看起来像这样:

private scrollTo(_index: any) {
  let elmnt = document.getElementById(_index);
  elmnt.scrollIntoView();
   window.scrollTo(0, 0); // only if it's innerhtml
}

这将确保关注的任何项目都能进入视图。

在html中,需要执行以下操作:

id={{item.uniqueID}} (focus)="scrollTo(item.uniqueID)" 确保它对于使用此函数的所有对象都是唯一的。

编辑

在html中尝试: id="list{{i}}"

if (event.code == "ArrowUp" && this.activeIndex > 0) {
    this.activeIndex--
    let str = `list${this.activeIndex}`;
    let elmnt = document.getElementById(str);
    elmnt.scrollIntoView();
    window.scrollTo(0, 0);
}

2

AlexFF1 8 年前

好的,通过自定义指令[聚焦]来修复它

应用程序。html

     <div id="listText">
        <div *ngFor="let message of messages; [focused]="i === activeIndex" let i=index" activeIndex = i" 
          [ngClass]="{'message-list-active': activeIndex === i  }">
       {{message.name}}
  </div>

专注。指令:

  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){}
   }