Javascript 清除angular 2中的文本框无效

正在尝试实现可重用的搜索框

代码是基本的，我对angular 2比较陌生，但现在已经使用angular 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;
  }
}

从'@angular/core'导入{Component，OnInit，Input}；
@组成部分({
moduleId:module.id，
选择器：“搜索框”，
模板：`
`,
样式URL：[
“./searchbox.component.less”
]
})
导出类SearchBoxComponent实现OnInit{
@Input（）占位符：字符串；
@Input（）值：字符串；
焦点：布尔；
ngOnInit（）{}
onFocus（）{
这个值=“”；
console.log（this.value）；
this.focus=true；
}
onFocusOut（）{
console.log（'focus out'）；
this.focus=false；
}
}

您需要使用[（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;
  }
}

导出类SearchBoxComponent实现OnInit{
@Input（）占位符：字符串；
值：字符串；
焦点：布尔；
ngOnInit（）{}
onFocus（）{
this.value=null；
console.log（this.value）；
this.focus=true；
}
onFocusOut（）{
console.log（'focus out'）；
this.focus=false；
}
}

希望能有帮助

双向数据绑定需要使用[（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;
  }
}

导出类SearchBoxComponent实现OnInit{
@Input（）占位符：字符串；
值：字符串；
焦点：布尔；
ngOnInit（）{}
onFocus（）{
this.value=null；
console.log（this.value）；
this.focus=true；
}
onFocusOut（）{
console.log（'focus out'）；
this.focus=false；
}
}

---

希望能有帮助

使用双向绑定，与ngModel一起使用：使用双向绑定，与ngModel一起使用：