Angular2 en utilisant * ngIf avec la directive focus?

Question

Dans mon application, j'ai essayé de placer un bouton qui affiche/cache un champ de saisie avec une propriété de composant booléen. Si le bouton affiche l'entrée, la mise au point doit être définie sur l'entrée. Mais cela ne semble pas fonctionner. Si je supprime le *ngIf, la directive de mise au point fonctionne correctement. J'ai créé un plunker qui montre ce que je veux dire. C'est un peu difficile de décrire mon "problème".

html dans le composant

<input *ngIf="filterShow.options" 
     [focus]="filterFocus.options" 
     [(ngModel)]="filter.options"> 

<button type="button" 
     (click)="setShowFilter('options')"> 
    focus 
</button> 

fonction setShowFilter()

private setShowFilter(filter: string) { 
    this.filterShow[filter] = !this.filterShow[filter]; 

    /* reset filter */ 
    this.filter[filter] = ""; 

    this.filterFocus[filter].emit(true); 
} 

focus.directive.ts

@Directive({ 
    selector: '[focus]' 
}) 
export class FocusDirective implements OnInit { 

    @Input('focus') focusEvent: EventEmitter<boolean>; 

    constructor(private elementRef : ElementRef, 
       private renderer : Renderer ) { } 

    ngOnInit() { 
    this.focusEvent.subscribe(event => { 
     this.renderer 
     .invokeElementMethod(this.elementRef.nativeElement, 'focus', []); 
    }); 
    } 
} 

Answer 1

eventEmitters sont les sorties, et non pour les entrées. Essayez quelque chose comme ceci:

@Directive({ 
    selector: '[focus]' 
}) 
export class FocusDirective implements OnChanges { 

    @Input('focus') focus: boolean; 

    constructor(private elementRef : ElementRef, 
       private renderer : Renderer ) { } 

    ngOnChanges() { 
    if (this.focus) { 
     this.renderer 
     .invokeElementMethod(this.elementRef.nativeElement, 'focus', []); 
    } 
    } 
} 

Answer 2

Une façon plus propre pour y parvenir sans avoir à utiliser une directive est d'utiliser <label> au lieu de <button> et utiliser les CSS pour ce style comme un bouton. Par exemple,

<label for="myInput"></label> <input id="myInput"></input>

De cette façon, vous pouvez obtenir mise au point même avec la présence de *ngIf parce que le <input> est maintenant lié à la <label>. Also, Angular2 documentation website warns about the use of ElementRef because of the security vulnerability it poses.