Angular 4 文本框自动获取焦点

import { Component, OnInit, ViewChild, ElementRef, Renderer } from '@angular/core';


 

 <input type="text" class="confirmBox" [(ngModel)]="confirmLocation" placeholder="Scan Material" autofocus/>


 

 

 

 autofocus。

。。

========================今天又遇到tab 切换之后，还是获取不到焦点

解决方法：

图

图

图

html:

<td style="width:10%">
 
 

  <input type="text" #box [ngClass]="{'confirmBox': classFlag, 'confirmBoxError': !classFlag}" [(ngModel)]="confirmLocation" (ngModelChange) ="checkscan($event)"
 
 

  placeholder="Scan Material" autofocus="autofocus" (keyup.enter)="onEnter(box.value)" />
 
 

  </td>
 
 

  
 

  ts:
 
 

  import { Component, OnInit, ViewChild, ElementRef, Renderer } from '@angular/core';
 
 

  constructor(public renderer: Renderer, private el: ElementRef, private service: PickDeliveryOrdersService, private router: Router, private modalService: NgbModal) { };
 
 

  ngOnInit(): void {
 
 

  this._success.subscribe((message) => { this.successMessage = message; this.errorMessage = ''; });
 
 

  this._error.subscribe((message) => { this.errorMessage = message; this.successMessage = ''; });
 
 

  debounceTime.call(this._success, 5000).subscribe(() => this.successMessage = '');
 
 

  debounceTime.call(this._error, 5000).subscribe(() => this.errorMessage = '');
 
 

  this.service.reasonTypes(2).subscribe(r => this.reasons = r);
 
 

  this.loadTopQueueDeliveryOrder();
 
 

  // document.getElementById('box').focus();
 
 

  // console.log(document.getElementById('box'));
 
 

  }
 
 

  // tslint:disable-next-line:use-life-cycle-interface
 
 

  ngAfterViewInit() {
 
 

  console.log('AfterViewInit之后');
 
 

  this.renderer.invokeElementMethod(
 
 

  this.infocus.nativeElement, 'focus');
 
 

  }