如何在Angular 4规范文件中模拟nativeElement.focus()

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appFocus]'
})
export class FocusDirective {
  constructor(private elementRef: ElementRef) {}

  public focus(): void {
    this.elementRef.nativeElement.focus();
  }
}

<input type="text" appFocus #focusInput>
<button (click)="focusInput.focus()">Focus Input</button>

import { Component, ViewChild } from '@angular/core';
import { FocusDirective } from './focus.directive';

@Component({
  selector: 'app-example',
  template: `
    <input type="text" appFocus #focusInput>
    <button (click)="focusInput.focus()">Focus Input</button>
  `
})
export class ExampleComponent {
  @ViewChild(FocusDirective)
  private focusInput: FocusDirective;
}