如何将表单数据从角度传递到nodejs答案

【问题标题】：How to pass form data from angular to nodejs如何将表单数据从角度传递到nodejs
【发布时间】：2018-03-29 18:48:31
【问题描述】：

我是 Angular5 的新手。我需要将用户详细信息从 angular 传递给 nodejs。

app.component.ts：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl, FormArray } from 
'@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    constructor(private http:Http) { } 
    onSubmit(registerForm) {
       console.log(registerForm.value);
       let url = 'http://localhost:8080/signup';
       this.http.post(url, {registerForm(registerForm)}).subscribe(res => 
          console.log(res.json()));
    }
 }

现在我需要将这些数据传递给 nodejs 路由以继续进行。

节点js路由文件：

module.exports = function(app, passport) {

app.post('/signup', passport.authenticate('local-signup', {
    successRedirect : '/', 
    failureRedirect : '/',
    failureFlash : true 
}));

};

现在收到以下错误：未捕获的错误：无法解析 AppComponent 的所有参数：(?)。

【问题讨论】：

请同时发布您的 HTML 内容
还在挣扎吗？还是你得到了答案？
@NikhilSavaliya 请找到我更新的帖子。出现错误。
@NikhilSavaliya 这是我发布的 html 表单：

标签： node.js angular

【解决方案1】：

从component.html 文件调用您的函数，它将触发您的component.ts 文件中的函数。从此函数调用服务，其中包含将请求您的节点 API 的函数

addData() {
    this.adminService.addCountry(this.form.value).subscribe(
      res => {
        var response = res.json();
        this.flashMessagesService.show(response.message, {
          cssClass: "alert-success",
          timeout: 2000
        });
      },
      error => {
        if (error.status == 401) {
          localStorage.removeItem("currentUser");
          this.router.navigate(["/"]);
        } else {
          this.flashMessagesService.show(error.json().error, {
            cssClass: "alert-danger",
            timeout: 2000
          });
        }
      }
    );
  }

创建管理服务以调用您在节点上运行的 HTTP URL

服务

  addCountry(formData) {
    console.log(formData);
    var authToken = this.getAuthToken();
    if (authToken != "") {
      var headers = this.getHeaders();
      headers.append("Authorization", authToken);
      return this.http
        .post(
          `http://localhost:3000/addData`,
          this.formData(formData),
          { headers: headers }
        )
        .map((response: Response) => {
          return response;
        });
    }
  }

【讨论】：

【解决方案2】：

您可以使用 Angular 中的服务向 nodeJs 发送数据。请参考 Codecraft 的 Angular 教程。请看https://codecraft.tv/courses/angular/http/core-http-api/

现在您需要发送一些注册表单数据。所以 1.将http模块导入AppModule 2.参考上面的文档 3.可以使用http的POST方式向nodejs传递数据

【讨论】：

【解决方案3】：

我认为你应该关注Observable。 https://angular.io/guide/observables

在逻辑上，您应该使用Observable 向您的 NodeJs (express) 应用程序请求创建服务器。然后你可以用subscribe添加到你的组件函数中。

一些代码：

创建身份验证服务

ng generate service authentication

为存储用户数据创建用户服务（或者只能存储在其他组件中）

ng generate service user

在 authentication.service.ts 创建身份验证方法

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { UserService } from '../user/user.service';
import { Router } from '@angular/router';`

@Injectable()
export class AuthenticationService {
  token: string;

  constructor(private router: Router, private httpClient: HttpClient, 
   public userService: UserService) {
     const currentUser = JSON.parse(localStorage.getItem('currentUser'));
     this.token = currentUser && currentUser.token;
  }

  getToken(email: string, password: string): Observable<User> {
     return this.httpClient.post<User>(apiRoutes.authentication, 
     {userEmail: email, userPassword: password});
  }

  authenticate(email: string, password: string) {
    this.getToken(email, password).subscribe(response => {
      if (response.userToken.length > 0) {
        this.userService.user.userEmail = response.userEmail;
        this.userService.user.userToken = response.userToken;
        this.userService.user._id = response._id;
        this.userService.user.isUserAuthenticated = true;
        localStorage.setItem('currentUser', JSON.stringify({token: response.userToken}));
        this.router.navigate(['/']);
       // TODO: Need some error logic
    } else {
      return false;
    }
  });
}

现在您可以在模板中添加表单

<form (ngSubmit)="this.authenticationService.authenticate(userEmail, password)">
...
</form>

【讨论】：