清除角度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

您需要使用[（ngModel）]而不是@Input（）進行雙向數據綁定。

<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; 
    } 
} 

希望它有幫助！