关注 ngFor 中的元素距离添加到集合中的每个项目更远

Question

我正在使用 @ViewChild 来关注在 Angular 中的 for 循环中提出和回答的最后一个问题。这非常适合第一个问题。但是，当我问第二个问题时，焦点不在元素上并且偏离了几个像素，然后问另一个问题会使偏移量加倍，依此类推。

我正在使用构建解决方案，我的解决方案代码如下：

HTML:

<div tabindex="1" #questionDiv class="faq-item" *ngFor="let faq of faqsAnswered">
    <div *ngIf="faq.question" class="ml-auto mr-3 col-lg-8 faq-user">
        {{faq.question}}
    </div>
    <div *ngIf="faq.answer" class="col-lg-8 ml-3 faq-response">
        {{faq.answer}}
        <p *ngIf="!feedbackGiven" class="mt-3">Was this answer helpful? <br /> <i class="fad fa-thumbs-up mr-3 text-success" (click)="provideFeedback(true)"></i> <i class="fad fa-thumbs-down text-danger" (click)="provideFeedback(false)"></i></p>
        <p *ngIf="feedbackGiven" class="mt-3">Thank you for your feedback!</p>
    </div>
</div>

CSS:

.faq-item {
    outline: none;
}

.faq-chat {
    max-height: 500px;
    overflow-x: hidden;
    overflow-y: auto;
}

和打字稿：

export class FaqComponent implements OnInit {

  @ViewChildren('questionDiv') questionDivs: QueryList<ElementRef>;

  // tslint:disable-next-line: max-line-length
  constructor() { }

  // tslint:disable-next-line: use-lifecycle-interface
  ngAfterViewInit() {
    this.questionDivs.changes.subscribe(() => {
      if (this.questionDivs && this.questionDivs.last) {
        this.questionDivs.last.nativeElement.focus();
      }
    });
  }
}

Answer 1

为了可聚焦，您的“div”应该有 tabindex。至少是负面的，但它必须存在。

<div *ngFor="let item of elements" #questionDiv 
     tabindex="-1" class="list-item">
  {{item}}
</div>

您问题中的所有其他内容似乎都有效。这是我认为您一直在寻找的实施示例。

https://stackblitz.com/edit/focus-last-child

如果有一些我没有考虑到的特定情况或提出问题，请随时分叉或修改它

关注 ngFor 中的元素距离添加到集合中的每个项目更远

Focus on element in ngFor is further off each item added to collection

javascript

angular

viewchild