Angular2：输入焦点

Question

我是 Angular 2 的新手，我的代码有问题。 当达到最大长度时，我正在尝试将 input1 的焦点更改为我的 input2。 现在，我计算按键的数量并与最大长度进行比较。 我不明白如何使用 .focus 属性... 我已经尝试了这些指令，但我又失败了，我没有其他想法来解决这个问题......这让我发疯了！ 有人可以帮我吗？

@Component({
  moduleId: module.id,
  selector: 'sd-about',
  template: ` 
   <span (ngSubmit)="onMovieSubmit()" *ngFor="let MovieField of MovieTab">
    <input 
      type="text" 
      maxlength="6"
      size="3"
      #movieName 
      (keyup)= presskeyNumber(movieName.value.length,MovieField.length,MovieField.id)><br/>
   </span>
   `
})

export class AboutComponent {
  @Output() RestrictionNumber:number;

  public presskeyNumber(movieName: any, restriction: number, MovieField: number) {
    this.RestrictionNumber = restriction;
    if (movieName === this.RestrictionNumber) {     // If my movie field length = my maxlength
      console.log('fieldFocus : ', MovieField + 1); // The next input Id
      // Change focus here
    }
  }

  public MovieTab = [
    { id: 1, movieName: "Movie1", length: 6 },
    { id: 2, movieName: "Movie2", length: 6 },
    { id: 3, movieName: "Movie3", length: 6 }
  ];
}

Answer 1

@ViewChild('movieName') movieName


public presskeyNumber(movieName: any, restriction: number, MovieField: number) {
    this.RestrictionNumber = restriction;
    if (movieName === this.RestrictionNumber) {     // If my movie field length = my maxlength
      console.log('fieldFocus : ', MovieField + 1); // The next input Id
      // Change focus here
       this.movieName.nativeElement.focus()
    }
  }

如果你想在循环中使用它，也许将局部变量作为参数传递给你的方法会更容易：

<span (ngSubmit)="onMovieSubmit()" *ngFor="let MovieField of MovieTab">
    <input 
      type="text" 
      maxlength="6"
      size="3"
      #movieName 
      (keyup)= presskeyNumber(movieName, movieName.value.length,MovieField.length,MovieField.id)><br/>
   </span>

然后：

public presskeyNumber(movieNameElement, movieName: any, restriction: number, MovieField: number) {
    this.RestrictionNumber = restriction;
    if (movieName === this.RestrictionNumber) {     // If my movie field length = my maxlength
      console.log('fieldFocus : ', MovieField + 1); // The next input Id
      // Change focus here
       movieNameElement.focus()
    }
  }

这样，您不需要使用ViewChild，因为您将输入元素传递给您的函数。