如何在循環中的第一個輸入元素上添加自動對焦？

Question

所以我正在做循環和顯示輸入，我想點擊選擇以將焦點添加到第一個輸入元素上。 有什么建議我怎樣才能選擇第一個元素並給他添加自動對焦？

Answer 1

這是怎么做的。 寫一個指令：

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

@Directive({
  moduleId: module.id,
  selector: '[focusOnInit]'
})
export class FocusOnInitDirective implements OnInit, AfterViewInit {
  @Input() focusOnInit ;

  static instances: FocusOnInitDirective[] = [];

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

  ngOnInit(): void {
    FocusOnInitDirective.instances.push(this)
  }

  ngAfterViewInit(): void {
    setTimeout(() => {
      FocusOnInitDirective.instances.splice(FocusOnInitDirective.instances.indexOf(this), 1);
    });

    if (FocusOnInitDirective.instances.every((i) =>  i.focusOnInit===0)) {
      this.renderer.invokeElementMethod(
        this.elementRef.nativeElement, 'focus', []);
    }
  }
}

在你的組件中：

import { Component } from '@angular/core';
@Component({
  moduleId: module.id,
  selector: 'app',
  template: `
    <div *ngFor="let input of [1,2,3,4]; let i=index">
      <input  type="text" [focusOnInit] = i >
    </div>
  `
})
export class AppComponent {

}

相應的plunker ，改編自此