在创建后立即关注输入

Question

我希望在 'activated' 时集中输入。这样做的原因是我正在构建一个多步骤表单（如 this one），它有多个输入，我将一一显示。这是我试过的。

解决方案 1

@Component(
...
template: `<input *ngIf="myCondition" id="myId" (load)="myLoad()">`){
    myCondition = false;
    load(){
        document.getElementById("myId").focus();
    }
}

当 myCondition 稍后变为真时，不会触发 (load) 事件，在我看来，这似乎是那种情况下最合乎逻辑的 DOM 事件。

解决方案 2

someFunction(){
    this.myCondition = true;
    document.getElementById("myId").focus();
}

此失败变为输入元素尚未加载：document.getElementById("myId") returns undefined。如果我 setTimeOut 它确实有效，大约 100 毫秒，但它不是一个非常优雅的解决方案，并且理想的超时在不同的客户端上会有所不同。

关于在 DOM 中加载输入时如何实现输入焦点的任何其他想法？

Answer 1

终于找到了解决您问题的方法。我制定了一个名为 focus 的指令来处理当前输入。

工作演示：http://plnkr.co/edit/TzQNL6DcIJ9tjAntu6Si?p=preview

@Directive({      
  selector:'[focus]',
})

export class focusDirective{

  constructor(private el:ElementRef, private rd:Renderer){        
      console.log(this.el.nativeElement);
      rd.setElementStyle(el.nativeElement,'background','yellow');
  }

  ngAfterViewInit(){
      this.el.nativeElement.focus();
  }
}

Component.ts

@Component({
  selector: 'my-app',
  directives:[focusDirective],
  template: `
    <div  *ngIf="step==1"> 
        #{{step}}step :<input focus type="text">  
      </div>
      <div *ngIf="step==2">
        #{{step}}step : <input focus type="text">
      </div>
      <div *ngIf="step==3">
        #{{step}}step : <input focus type="text">
    </div>
      <hr>
      <button (click)="next()">NEXT</button>
  `
})
export class App {
  step=1;
  next(){
    ++this.step;
  }
}

Answer 2

对于动态创建的输入，即在 table 中，可以使用 @ViewChildren 更改侦听器

来完成

模板：

<tr *ngFor="let row of rows">    
  <td>
    <input type="text" #name>
  </td>
</tr>

组件

@Component({
  selector: 'my-component',
  templateUrl: './my-componentt.html',
  styleUrls: ['./my-component.scss']
})
export class MyComponent implements OnInit, AfterViewInit {

  @ViewChildren('name') nameInputs: QueryList<ElementRef>

  ngAfterViewInit(): void {
    this.nameInputs.changes.subscribe(()=>{
      setTimeout(()=>{
        this.nameInputs.last.nativeElement.focus()
      });
    })
  }

}

在创建后立即关注输入

Focus on input right after its creation

angular2-template

angular

解决方案 1

解决方案 2