Angular2使用* ngIf與焦點指令？

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

EventEmitters是輸出，而不是輸入。嘗試這樣的事情，而不是：

@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樣式它像一個按鈕。例如，

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

這種方式可以實現對焦即使有*ngIf存在，因爲<input>被綁定到<label>。 Also, Angular2 documentation website warns about the use of ElementRef because of the security vulnerability it poses.