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

Question

我正在尝试使用类和服务将我的表单信息发送到另一个组件，我几乎尝试了 google 上的所有方法，但仍然对我不起作用，操作是对我来说有点复杂，因为我从 angula 开始，你可以告诉我如何做到这一点而不会太复杂，拜托，这是我的代码：

User.Services.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();
  }

}

Answer 1

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

A BehaviorSubject holds one value. When it is subscribed it emits the value immediately. A Subject doesn't hold a value.

尝试使用：

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

代替

private subject = new Subject<any>();

更多详情：

SAMPLE DEMO（问题相同）

For testing open user.service.ts

Try both method one by one

private myUser = new BehaviorSubject(null);

private myUser = new Subject<any>();

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

Problems sending information from one form to another component

angular

angular7

angular8