Warum template-lokale Variablen sind nicht verwendbar in templates bei der Verwendung von *ngIf?

Als nach einer Lösung für das Fokus-problem haben, könnten Sie ein Attribut Richtlinie focusMe:

import {Component, Directive, ElementRef} from 'angular2/core';
@Directive({
  selector: '[focusMe]'
})
export class FocusDirective {
  constructor(private el: ElementRef) {}
  ngAfterViewInit() {
    this.el.nativeElement.focus();
  }
}
@Component({
    selector: 'my-app',
    directives: [FocusDirective],
    template: `<h1>My First Angular 2 App</h1>
      <button (click)="toggle()">toggle</button>
      <input focusMe *ngIf="isVisible">
    `
})
export class AppComponent { 
  constructor() { console.clear(); }
  private isVisible = false;
  toggle() {
    this.isVisible = !this.isVisible;
  }
}

Plunker

Update 1: Hinzufügen der Lösung, die für die re-focus-Funktion:

import {Component, Directive, ElementRef, Input} from 'angular2/core';

@Directive({
  selector: '[focusMe]'
})
export class FocusMe {
    @Input('focusMe') hasFocus: boolean;
    constructor(private elementRef: ElementRef) {}
    ngAfterViewInit() {
      this.elementRef.nativeElement.focus();
    }
    ngOnChanges(changes) {
      //console.log(changes);
      if(changes.hasFocus && changes.hasFocus.currentValue === true) {
        this.elementRef.nativeElement.focus();
      }
    }
}
@Component({
    selector: 'my-app',
    template: `<h1>My First Angular 2 App</h1>
    <button (click)="showInput()">Make it visible</button>
    <input *ngIf="inputIsVisible" [focusMe]="inputHasFocus">
    <button (click)="focusInput()" *ngIf="inputIsVisible">Focus it</button>
    `,
    directives:[FocusMe]
})
export class AppComponent {
  private inputIsVisible = false;
  private inputHasFocus = false;
  constructor() { console.clear(); }
  showInput() {
    this.inputIsVisible = true;
  }
  focusInput() {
    this.inputHasFocus = true;
    setTimeout(() => this.inputHasFocus = false, 50);
  }
}

Plunker

Alternative zur Verwendung setTimeout() zurücksetzen, um die Fokus-Eigenschaft auf false wäre um ein Ereignis zu erstellen/output-Eigenschaft auf die FocusDirective, und emit() ein Ereignis, wenn focus() genannt wird. Die AppComponent würde dann hören, dass Ereignis und setzen Sie die Fokus-Eigenschaft.

Update 2: Hier ist eine alternative/bessere Möglichkeit, um die re-focus-Funktion, mit ViewChild. Wir brauchen nicht zu verfolgen, im Fokus Stand diese Weise, noch brauchen wir ein input-Eigenschaft auf die FocusMe Richtlinie.

import {Component, Directive, ElementRef, Input, ViewChild} from 'angular2/core';

@Directive({
  selector: '[focusMe]'
})
export class FocusMe {
    constructor(private elementRef: ElementRef) {}
    ngAfterViewInit() {
      //set focus when element first appears
      this.setFocus();
    }
    setFocus() {
      this.elementRef.nativeElement.focus();
    }
}
@Component({
    selector: 'my-app',
    template: `<h1>My First Angular 2 App</h1>
    <button (click)="showInput()">Make it visible</button>
    <input *ngIf="inputIsVisible" focusMe>
    <button (click)="focusInput()" *ngIf="inputIsVisible">Focus it</button>
    `,
    directives:[FocusMe]
})
export class AppComponent {
  @ViewChild(FocusMe) child;
  private inputIsVisible = false;
  constructor() { console.clear(); }
  showInput() {
    this.inputIsVisible = true;
  }
  focusInput() {
    this.child.setFocus();
  }
}

Plunker

Update 3: Hier ist noch eine alternative, die nicht erforderlich ist eine Richtlinie, die immer noch verwendet ViewChild, aber wir Zugriff auf das Kind über ein lokales template-Variablen eher als ein Attribut-Richtlinie (danke @alexpods für den Tipp):

import {Component, ViewChild, NgZone} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: `<h1>Focus test</h1>
    <button (click)="showInput()">Make it visible</button>
    <input #input1 *ngIf="input1IsVisible">
    <button (click)="focusInput1()" *ngIf="input1IsVisible">Focus it</button>
    `,
})
export class AppComponent {
  @ViewChild('input1') input1ElementRef;
  private input1IsVisible = false;
  constructor(private _ngZone: NgZone) { console.clear(); }
  showInput() {
    this.input1IsVisible = true;
    //Give ngIf a chance to render the <input>.
    //Then set the focus, but do this outside the Angualar zone to be efficient.
    //There is no need to run change detection after setTimeout() runs,
    //since we're only focusing an element.
    this._ngZone.runOutsideAngular(() => { 
      setTimeout(() => this.focusInput1(), 0);
   });
  }
  setFocus(elementRef) {
    elementRef.nativeElement.focus();
  }
  ngDoCheck() {
    //if you remove the ngZone stuff above, you'll see
    //this log 3 times instead of 1 when you click the
    //"Make it visible" button.
    console.log('doCheck');
  }
  focusInput1() {
    this.setFocus(this.input1ElementRef);
  }
}

Plunker

Update 4: ich aktualisierte den code in Update 3 zu verwenden NgZone, so dass wir nicht Ursache Angular change-detection-Algorithmus zu laufen, nachdem die setTimeout() beendet. (Für mehr über change detection, siehe diese Antwort).

Update 5: ich aktualisierte den code in der oben plunker zu verwenden-Renderer, um es web-worker sicher. Zugriff auf focus() direkt auf nativeElement wird abgeraten.

focusInput1() {
  this._renderer.invokeElementMethod(
    this.input1ElementRef.nativeElement, 'focus', []);
}

Habe ich eine Menge gelernt von dieser Frage.