Input Angular2如何在提交时清除输入值而不传递dom元素

我已经读到传递dom元素不是一个好的实践，所以我提出了这样的观点：

         <div>
            <input #message placeholder="message" (keyup.enter)="add(message.value)" />
            <button (click)="add(message.value)">Add+</button>
            <p>
                the message is {{ message.value }}
            </p>
        </div>

---

但是如何才能清除so inside

add

方法，使

input#message

不包含任何文本？我尝试了

message=null但它不起作用。
如果使用（模糊）=扩展响应，则可以按如下方式重置输入字段：

<div>
        <input #message placeholder="message (keyup.enter)="add(message.value)" (blur)="add(message.value); message.value='' " />
        <button (click)="add(message.value)">Add+</button>
        <p>
            the message is {{ message.value }}
        </p>
    </div>


您可以使用ngModel而不是#elem.value：

  <div>
   <input placeholder="message" [(ngModel)]="message" (keyup.enter)="add(message)"/>
      <button (click)="add(message)">Add+</button>
        <p>
           the message is {{ message }}
         </p>
  </div>

在add函数中。这将有助于：

    add(message: string) {
      this.message = message;
      console.log(this.message);
      this.messengerService.add(this.message);
      this.message = null;
    }

视图中的
message.value
属性未映射到模式中的
this.message
当angular以
[（ngModel）]的形式提供双向数据绑定时，为什么要使用额外参数。您可以使用ngModel在视图和类/控制器中获得通知。不需要在方法调用时传递额外的参数。因此，您可以在这里使用这种简化方法

<div>
   <input placeholder="message" [(ngModel)]="message" (keyup.enter)="add()"/>
      <button (click)="add(); message = null">Add+</button>
        <p>
           the message is {{ message }}
         </p>
  </div>

message: string = null;
 add() {
      console.log(this.message);
      // this.messengerService.add(this.message);
    }


加+

消息是{{message}

消息：string=null；
添加（）{
console.log（this.message）；
//this.messengerService.add（this.message）；
}

这里是同样的工作演示

ngModel
输入属性设置元素的value属性，而
ngModelChange
输出属性侦听元素值的更改。详细信息特定于每种元素，因此NgModel指令仅适用于元素，例如输入文本框

试试这个。message=“”或者这个。message=未定义。是的，我也试过了
    add(message: string) {
      this.message = message;
      console.log(this.message);
      this.messengerService.add(this.message);
      this.message = null;
    }

<div>
   <input placeholder="message" [(ngModel)]="message" (keyup.enter)="add()"/>
      <button (click)="add(); message = null">Add+</button>
        <p>
           the message is {{ message }}
         </p>
  </div>

message: string = null;
 add() {
      console.log(this.message);
      // this.messengerService.add(this.message);
    }