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

BehaviorSubject拥有一个值。订阅后，它发出立即值。主题没有值。

尝试使用：

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

代替

private subject = new Subject<any>();

有关详细信息： DO READ

SAMPLE DEMO （具有相同问题）

要测试，请打开user.service.ts

一一尝试两种方法

private myUser = new BehaviorSubject(null);

private myUser = new Subject<any>();

从一种形式向另一种形式发送信息时出现问题

1 个答案: