Как правильно дождаться обновления шаблона в Angular 2

Question

Я пытаюсь понять, как лучше подождать, пока шаблон обновится в приложении Angular 2 после изменения модели.

@Component{ 
    template : `<button type="button" (click)="handleClick()">Click</button> 
       <div *ngIf="!hidden"> 
        <input type='text' #eleInput/> 
       </div>` 
} 
export class Sample{ 
    private hidden: boolean = true; 
    @ViewChild('eleInput') eleInput: ElementRef; 

    constructor(){} 

    handleClick(){ 
     this.hidden = false; 

     //nativeElement is undefined here 
     this.eleInput.nativeElement.focus(); 

     //nativeElement is defined here 
     setTimeout(() => { 
     this.eleInput.nativeElement.focus(); 
     }); 
    } 
} 

Использование SetTimeout в приведенном выше коде кажется Hacky, поэтому я хотел бы знать, если есть лучший подход.

Спасибо!

Answer 1

Использование [hidden] вместо ngIf. NgIf удаляет элементы. Вот почему this.eleInput.nativeElement.focus(); не работает без setTimeout, потому что строка this.eleInput.nativeElement.focus(); выполняется непосредственно перед тем, как элемент DOM будет/установлен для дальнейшего использования.
Когда [hidden] свойство не удаляет элемент DOM. Он просто показывает и скрывает элемент. Таким образом, ссылка на элемент DOM будет там, и ваш nativeElement не будет определен. Таким образом, это сработает.

<div [hidden]="hidden">      //<<<===use hidden instead of *ngIf 
      <input type='text' #eleInput/> 
</div> 

---

private hidden: boolean = true; 
    @ViewChild('eleInput') eleInput: ElementRef; 

    constructor(){} 

    handleClick(){ 
     this.hidden = false;      
     this.eleInput.nativeElement.focus();  //<<<===now this will work. 
    } 
} 

Answer 2

Невозможно дождаться обновления шаблона.

Вы можете придать ChangeDetectorRef

constructor(private cdRef:ChangeDetectorRef) {} 

, а затем вызвать

this.cdRef.detectChanges(); 

Насколько я знаю, шаблон обновляется, когда возвращается вызов.