双方向バインディングの出力部分がカスタムディレクティブで機能しない

Question

[(appfocused)]="isFocused"のような双方向バインドをサポートするプロパティを持つディレクティブを実装しようとしています。コンポーネントは要素にフォーカスするためにisFocusedプロパティをtrueに設定できますが、要素がフォーカスを失ったら変数はfalseに戻されます。

私はバインディングのこの種を実装するための鍵は同じですが、Change接尾辞出力1と名付け@Inputと@Outputのための2つのプロパティを持つていること（hereとhere）読みました。これはこれまでの私の実装です（TypeScript）：

@Directive({ 
    selector: '[appfocused]' 
}) 
export class FocusedDirective implements OnChanges, AfterViewInit { 
    @Input('appfocused') 
    focused: boolean; 

    @Output('appfocused') 
    focusedChange: EventEmitter<boolean> = new EventEmitter(); 

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

    ngAfterViewInit() { 
     this.renderer.listen(this.elementRef.nativeElement, 'blur',() => { 
      this.setFocused(false); 
     }); 
    } 

    ngOnChanges() { 
     if (this.focused) { 
      setTimeout(() => { 
       this.elementRef.nativeElement.focus(); 
      }, 0); 
     } 
    } 

    private setFocused(value: boolean) { 
     this.focused = value; 
     this.focusedChange.emit(this.focused); 
     console.log('focused set to ' + value); 
    } 
} 

入力プロパティはうまく動作しますが、出力プロパティを動作させることができません。 console.logコールのおかげで、focusedChange.emit()行がヒットしていますが、プロパティがバインドされている値には影響しません。

Here is a working example (plunker).はisFocusedプロパティの値を表示し、設定するダミー部品含ま：フォーカスリンクを押す

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <textarea [(appfocused)]="isFocused"></textarea> 
    </div> 
    <a (click)="focus()" href="#">Focus</a> 
    {{isFocused}} 
    `, 
}) 
export class App { 
    isFocused = false; 

    focus() { 
    this.isFocused = true; 
    } 
} 

を予想通りtextareaに焦点を当てています。ただし、それをクリックしてもisFocused変数はリセットされません。リンクをもう一度押しても効果はありません。isFocusedの値はすでに真であるため、Angularは変更を検出しません。

私には何が欠けていますか？

Answer 1

あなたが言及した記事は、出力の名前を入力プラス「変更」サフィックスと同じである必要があります動作するように双方向結合速記構文については、述べたように。

ですから、ほとんどそこにいる - あなただけの適切@Output()に名前を付ける必要があります： "はをappfocused" が、代わりに "は変更をappfocused" ではない：

@Output('appfocusedChange') 
focusedChange: EventEmitter<boolean> = new EventEmitter();