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