フォーカスディレクティブで* ngIfを使用するAngular2？

Question

私のアプリケーションでは、入力フィールドをブール値のコンポーネントプロパティで表示/非表示するボタンを配置しようとしました。ボタンに入力が表示されている場合は、入力にフォーカスを設定する必要があります。しかし、それは動作していないようです。 *ngIfを削除すると、フォーカス指示が正常に動作します。

私はplunkerを作成しました。私の "問題"を説明するのは難しいです。成分中

HTML

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

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

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

持つEventEmitterは出力用ではなく、入力のためのものです。

@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

ディレクティブを使用することなく、これを達成するためのクリーンな方法は<label>代わりの<button>を使用し、ボタンのように、それをスタイルにCSSを使用することです：代わりにこのような何かを試してみてください。 <input>が今<label>にバインドされているため、例えば

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

この方法であなたも*ngIfの存在に焦点を達成することができます。 Also, Angular2 documentation website warns about the use of ElementRef because of the security vulnerability it poses.