Question

我从Angular开始，我在传输数据方面遇到了问题。基本上，我正在尝试从我的表单中获取数据到另一个组件。我希望能够访问接收组件中的每个元素（例如data.name）。这是我的发件人（组件）代码：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { UserDataService } from '../services/user-data.service';
import * as $ from 'jquery';

@Component({
  selector: 'user-form',
  templateUrl: './user-form.component.html',
  styleUrls: ['./user-form.component.css']
})
export class UserFormComponent implements OnInit {

  data: any
  form: FormGroup;
  name: string; 
  use: string;
  year: number;
  duration: string;
  milageVehicle: number;
  milageYear: number;
  passengerCoverage: string;
  postcode: string;
  towing: string;
  vehicleBrand: string;
  vehicleLicensePlate: string;
  vehicleSeries: string;


  constructor(
    private fb: FormBuilder,
    private userDataService: UserDataService
  ) { 
    this.form = fb.group({
      'name': [null, Validators.required],
      'use': [null, Validators.required],
      'year': [null, Validators.required],
      'duration': [null, Validators.required],
      'milageVehicle': [null, Validators.required],
      'milageYear': [null, Validators.required],
      'passengerCoverage': [null, Validators.required],
      'postcode': [null, Validators.required],
      'towing': [null, Validators.required],
      'vehicleLicensePlate': [null, Validators.required],
      // 'vehicleBrand': [null, Validators.required], -- Get from API
      // 'vehicleSeries': [null, Validators.required]

    })
    }
    onSubmit(data) {
      this.name = data.name;
      this.use = data.use;
      this.year = data.year;
      this.duration = data.duration;
      this.milageVehicle = data.milageVehicle;
      this.milageYear = data.milageYear;
      this.passengerCoverage = data.passengerCoverage;
      this.postcode = data.postcode;
      this.towing = data.towing;
      this.vehicleLicensePlate = data.vehicleLicensePlate;

      // Send data to service.




    }

Answer 1

您可以使用将在组件中提供的服务（除非您需要将范围作为所有应用程序，在这种情况下，您将其注入应用程序的任何模块中）。

我的建议是构建一个表示表单数据的接口，并构建该类型的变量。然后，您只需在表单提交中设置服务中的数据。

这将是界面：

export interface IFrmData{
name:string;
use:string;
year:number;
duration:number;
...
}

这是服务：

import {IFrmData} from './ifrdata.interface';
inport {Injectable} from '@angular/core';
Injectable()
export class FrmService{
idata:IFrmData;
setData(_data:IFrmData):void{
idata= Object.assign({},_data);
}
    }

现在，在表单组件中，您还可以创建IFrmData类型的变量，并在onSubmit上设置其值：

constructor(private frmService:FrmService){}
    onSubmit(data) {
      this.name = data.name;
      this.use = data.use;
      this.year = data.year;
      this.duration = data.duration;
      this.milageVehicle = data.milageVehicle;
      this.milageYear = data.milageYear;
      this.passengerCoverage = data.passengerCoverage;
      this.postcode = data.postcode;
      this.towing = data.towing;
      this.vehicleLicensePlate = data.vehicleLicensePlate;
      this.frmService.setData(data);
}

从这一点开始，只要它具有该服务的DI，就很容易从ant其他组件获取数据。

您可以使用主题作为观察者和观察者来获取和设置数据。角度站点有一个很好的文档：https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

Answer 2

您可以使用BehaviorSubject实现此类功能。当存在来自第一个组件的数据时，您可以将该数据推送到BehaviorSubject，然后在第二个组件中订阅该数据，这样您就可以在从第一个组件推送数据后立即获取数据。你可以在userDataService，

中做同样的事情

private userDataSubject: BehaviorSubject;
constructor() {
   this.userDataSubject = new BehaviorSubject(null);
}
pushData(data) {
  this.userDataSubject.next(data);
}
getData() {
  return this.userDataSubject.asObservable();
}

现在，在您发送数据的组件中，您可以执行以下操作，

onSubmit(data) {
  this.userDataService.pushData(data);
}

在您收到数据的组件中，您可以subscribe获取data这样的内容，

this.userDataService.getData().subscribe(
  data => {
   console.log(data);
}
)

（Angular2 / 4）使用服务

2 个答案: