Angular2：尝试使用@ViewChild 注释将焦点设置到输入字段时出现未定义的错误

Question

I have a input field which I set focus to when my view loads in the following way:

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

this works fine from within the ngAfterViewInit() function but when I try to do it in another part of my view when a button is clicked I get an exception saying that focusInput is undefined. After reading up a bit it seems like ngIf could be the cause of this as the part of the view that contains the input field #focusInput gets shown or hidden using ngIf. Is there any way I can check using ngOnChanges() or anything else whether the #focusInput input field is currently shown and if it is set focus to it?

Answer 1

It happens when you have ngIf or ngFor directives inside your template and your input can not be linked to focusInput property you added inside your class. Instead use this code:

<input type="text" #myInput />
{{ myInput.focus() }}

Just add {{ myInput.focus() }} right after input inside template

Answer 2

The simplest solution turned out to be writing a custom focus attribute directive. This helped a lot:

How to move focus on form elements the Angular way

Answer 3

I know its very late to answer your question. If you want focus after any click or view change so for this you need to call change detector. You can call change detection after your view change or a click by calling detectchanges().

`constructor(private detRef:ChangeDetectorRef) {}
  @ViewChild('name_input') input: ElementRef;

    private buttonClick(): void {
      this.detRef.detectChanges();
      this.input.nativeElement.focus();
    }`

Hope this will helpful.