时间戳

首页 > 解决方案 > 将信息从一个表单发送到另一个组件时出现问题

angular - 将信息从一个表单发送到另一个组件时出现问题

问题描述

我正在尝试使用类和服务将我的表单信息发送到另一个组件，我已经尝试了谷歌上的几乎所有东西，但对我来说仍然没有任何效果，当我从 angula 开始时，这个动作对我来说有点复杂，你可以给我一些想法，让我知道如何做到这一点而不会变得如此复杂，请这是我的代码：

用户服务.ts

import { Injectable } from "@angular/core";
import { Usuario } from "../model/usuario";
import { Observable, Subject } from "rxjs";

@Injectable()
export class UsuarioServices {
  public usuario: Array<Usuario>;
  private subject = new Subject<any>();
  constructor() {
    //Iniciamos el mensaje para que pueda tener contenido

  }

   public sendInfo(
      name: String, lastname: String, direction: String, apt: String, country: String, cardtype: String,
      cardnumber: any, cvc: any, month: any, year: any, email: any, checkbox: any
    ):Array<Usuario>{

      this.subject.next(this.usuario=[new Usuario(name, lastname, direction, apt, country,
        cardtype, cardnumber, cvc, month, year, email, checkbox)])

      return this.usuario;
    }

  clearMessage() {
    this.subject.next();
  }

  getMessage(): Observable<any> {
    return this.subject.asObservable();
  }
}

我捕获表单信息的组件：

import { Component, OnInit } from "@angular/core";
import {
  AbstractControl,
  FormBuilder,
  FormGroup,
  Validators,
  ControlContainer
} from "@angular/forms";
import { Usuario } from "../../model/usuario";
import { UsuarioServices } from "../../Services/usuario.service";

@Component({
  selector: "app-data-form",
  templateUrl: "./data-form.component.html",
  styleUrls: ["./data-form.component.css"],
  providers: [UsuarioServices]
})
export class DataFormComponent implements OnInit {
  public formGroup: FormGroup;
  private firstname: String;
  private lastname: String;
  private direction: String;
  private apt: String;
  private country: String;
  private card_type: String;
  private card_number: any;
  private cvc: any;
  private month: any;
  private year: any;
  private email: any;
  private checkBoxValue: any = false;
  public userdos: Array<Usuario>;

  constructor(
    private formBuilder: FormBuilder,
    private _UsuarioServices: UsuarioServices
  ) {}

  ngOnInit() {
    this.buildForm();
  }

  private buildForm() {
    this.formGroup = this.formBuilder.group({
      name: [this.firstname, Validators.required],
      lastname: [this.lastname, Validators.required],
      email: [this.email, [Validators.email, Validators.required]],
      addres: [this.direction, Validators.required],
      apt: [this.apt, Validators.required],
      tel: ["", [Validators.required, this.validatePassword]],
      country: [this.country, Validators.required],
      cardtype: [this.card_type, Validators.required],
      number: [this.card_number, Validators.required],
      cvc: [this.cvc, Validators.required],
      month: [this.month, Validators.required],
      year: [this.year, Validators.required]
    });
  }

  public send() {
    var user = this.formGroup.value;
    this.userdos = this._UsuarioServices.sendInfo(user.name,user.lastname,user.addres,user.apt,
      user.country,user.cardtype,user.number,user.cvc,user.month,user.year,user.email,this.checkBoxValue
    );

    //  console.log(this.datainfo.Getfirstname);
  }

}

我尝试接收信息的组件：

import { Component, OnInit, OnDestroy } from "@angular/core";
import { Usuario } from "../../model/usuario";

import { UsuarioServices } from "../../Services/usuario.service";

import { Subscription } from "rxjs";

@Component({
  selector: "app-card",
  templateUrl: "./card.component.html",
  styleUrls: ["./card.component.css"],
  providers: [UsuarioServices]
})
export class CardComponent implements OnDestroy {
  public message: any;
  public subscription: Subscription;

  constructor(private _UsuarioServices: UsuarioServices) {

    this.subscription = this._UsuarioServices.getMessage()
      .subscribe(message => { this.message = message; });
      console.log(this.message);
  }


  ngOnDestroy() {

    this.subscription.unsubscribe();
  }

}

标签： angularangular7angular8

解决方案

这就是Subject工作原理，在你的情况下你可以使用BehaviorSubject

一个 BehaviorSubject 拥有一个值。当它被订阅时，它会立即发出值。主题不包含值。

尝试使用：

private subject = new BehaviorSubject<any>(null);

代替

private subject = new Subject<any>();

欲了解更多详情：请阅读

示例演示（同样的问题）

用于测试打开user.service.ts

一个一个地尝试这两种方法

private myUser = new BehaviorSubject(null);

private myUser = new Subject<any>();

推荐阅读