将 html ngModel 值传递给服务答案

【问题标题】：Pass an html ngModel value to service将 html ngModel 值传递给服务
【发布时间】：2020-10-24 03:48:14
【问题描述】：

我想将位于 app.component.html 上的 html ngModel 值 <input type="email" [(ngModel)]="email"/> 传递给名为 email.service.ts 的服务。在服务里面我有这个代码：

const apiEmail ='http://apilayer.net/api/check?access_key=key' +'&email=' +emailAddress;

我想动态地将[(ngModel)]="email" 值传递给+emailAddress，这样每次用户输入电子邮件地址时，就可以检查它是否存在。

谢谢！

【问题讨论】：

在文档中解释了 ngModel 的使用:)：angular.io/api/forms/… 然后您可以将值发送到组件：angular.io/api/core/Output

标签： html angular typescript angular10 ngmodel

【解决方案1】：

您可以轻松地为组件中的email 属性定义一个setter，并在那里调用所需的服务方法。

Component

private _email: string;

set email(email: string) {
  this._email = email;
  this.emailService.checkEmail(email);
}

get email() {
  return this._email;
}

【讨论】：

【解决方案2】：

将emailAddress 更改为email

谢谢丹尼尔

【讨论】：

它无法读取 'email' [(ngModel)]="email" 在 app.component.html 上，变量 'email' 设置在 app.component.ts 和 const apiEmail =' apilayer.net/api/check?access_key=key'+'&email='+emailAddress;在 email.service.ts