Angular 2+中客户端和服务器之间的通信

Posted 2023-03-13

【中文标题】Angular 2+中客户端和服务器之间的通信

【英文标题】：Communication between client and server in Angular 2+

【发布时间】：2018-05-21 05:21:33

【问题描述】：

我正在使用 NodeMailer 进行邮件服务。我必须从客户端的一个字段中获取一个电子邮件地址，然后将该值发送到我的 nodemailer 代码所在的 app.js。

客户端

ngOnInit() 
  this.forgotForm = this.formBuilder.group(
    email: this.email,
  );


sendmail() 

app.js，Nodemailer 代码（我必须在此处获取电子邮件 ID）

let mailOptions = 
    from: '[e-mail]',
    to: '',
    subject: 'Test Mailer',
    text: 'I am testing Nodemailer to send email.',
;

【问题讨论】：

那么问题出在哪里，谁/是什么阻止你从角度形式获取信息

没有什么能阻止兄弟，因为我是 Angular 的新手，我不知道如何将值从客户端发送到服务器端。

阅读 Angular 中的 HTTP 请求：angular.io/guide/http

@ChrisFelix 我添加了一些链接，可以帮助您进行排序，希望对您有所帮助

谢谢兄弟的链接

【参考方案1】：

您需要在 Angular 中使用服务才能做到这一点。在终端中将路径设置为要创建服务的文件夹，然后使用命令 ng generate service <service_name> 。这将创建一个文件 service_name.service.ts。您可以参考https://codecraft.tv/courses/angular/http/overview/ 或https://angular.io/tutorial/toh-pt4 了解更多详情。

您可以使用 API 以及 http 方法 get、post、put、delete 等来完成您的任务。

在相应的 component.ts 文件中创建一个可变电子邮件，如：

email =string;

在 html 文件中将输入字段与 ngModel 绑定为：

[(ngModel)]="email"

然后在 service.ts 中创建一个接受电子邮件作为参数的函数

endMail(email) 
//make api call using http method(say post)
// supply email
  let url = <APIURL>
  return http.post(url, email: email);

再次在component.ts中导入该服务并在构造函数中实例化并使用方法调用服务

【讨论】：

当然，兄弟。如您所知，基本上我们正在处理 RESTful 应用程序，并且我们将拥有模型、控制器和路由等文件夹。假设我们在服务器端编写了一个代码（比如发送邮件）。现在客户端需要向服务器端发送数据（邮件ID、消息等参数）。对于这个 APIurls（路径例如：/api/sendmail）会有所帮助。在服务器端，在路由中，我们将执行必要的操作。您可能肯定知道这一点

我如何在服务器端接收它（即）在收件人邮件地址中

非常有用的兄弟。我如何在服务器端接收它（即）在收件人邮件地址中

您了解 API 网址吗？它看起来像 localhost:8000/users 或 localhost:8000/sendmail

return http.post(`localhost:3000/sendmail, email: email);我已经这样做了，我可以发送我的邮件，但我不知道如何获取收件人地址的电子邮件值 bro

【参考方案2】：

你应该考虑看看/学​​习 Angular，然后进入表单。然后进入 http 模块，这将帮助您将数据发布到服务

这是一个要点而不是实际答案

有很多方法可以完成这项工作，使用普通输入并使用按钮控件或使用表单[最佳方法]从该输入获取数据，因为您可能还有其他详细信息要发送。

Angular 中有两种 froms Template Driven 或 Reactive Forms。

在您的表单中获取详细信息后，您需要将其发布到我猜的 Rest 服务。为此，您需要查看 Angular Http Client 模块

请查看这些链接以获取更多详细信息。