Question

我是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的所有参数:(？）。

Answer 1

从System.out.println(x + " " + y + " " + z);文件中调用您的函数，它将触发您component.html文件中的函数。从此函数调用服务，其中包含将请求您的节点API的函数

component.ts

创建管理服务以调用在节点

上运行的HTTP URL

<强>服务

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
          });
        }
      }
    );
  }

Answer 2

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

目前您需要发送一些注册表单数据。所以 1.将http模块导入AppModule 2.请参阅上面的文档 3.您可以使用http

的POST方法将数据传递给nodejs

Answer 3

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

在逻辑上，您应该向NodeJs（express）应用创建具有Observable请求的服务器。然后，您可以使用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>

如何将表单数据从angular传递给nodejs

3 个答案: