角度2のテキストボックスのクリアは機能しません

Question

再利用可能な検索ボックスを実装しようとしています。

コードは基本的なものですが、角度2には比較的新しいですが、しばらく角度1で作業しました。

テキストボックスのフォーカスで値がクリアされないのはなぜですか？

import { Component, OnInit, Input } from '@angular/core'; 

@Component({ 
    moduleId: module.id, 
    selector: 'searchbox', 
    template: ` 
    <form id="search" action="/search" method="get" [class.focus]="focus" class="searchbar" autocomplete="off" role="search"> 
     <i class="fa fa-search search-icon"></i> 
     <input (focus)="onFocus()" (focusout)="onFocusOut()" name="q" 
      type="text" [value]="value" [placeholder]="placeholder" tabindex="1" autocomplete="off" maxlength="240"> 
     <button type="submit" class="btn js-search-submit"> 
      <i class="fa fa-search"></i> 
     </button> 
    </form> 

    `, 
    styleUrls: [ 
    './searchbox.component.less' 
    ] 
}) 

export class SearchBoxComponent implements OnInit { 

    @Input() placeholder: string; 
    @Input() value: string; 
    focus: boolean; 

    ngOnInit() { } 

    onFocus() { 
    this.value = ''; 
    console.log(this.value); 
    this.focus = true; 
    } 

    onFocusOut() { 
    console.log('focus out'); 
    this.focus = false; 
    } 
} 

Answer 1

双方向データバインディングの場合は、@ Input（）の代わりに[（ngModel）]を使用する必要があります。

<input (focus)="onFocus()" (focusout)="onFocusOut()" name="q" 
     type="text" [(ngModel)]="value" [placeholder]="placeholder" tabindex="1" autocomplete="off" maxlength="240"> 

export class SearchBoxComponent implements OnInit { 
    @Input() placeholder: string; 
    value: string; 
    focus: boolean; 

    ngOnInit() { } 

    onFocus() { 
    this.value = null; 
    console.log(this.value); 
    this.focus = true; 
    } 

onFocusOut() { 
    console.log('focus out'); 
    this.focus = false; 
    } 
} 

希望すると助かります！