javascript - Angular 2 将表单数据传递给另一个组件

Question

我有一个允许用户创建帐户的表单，一旦用户单击提交按钮，用户就会导航到另一个页面，其中包含他们创建的帐户的详细信息。我遇到的问题是将该对象传递给详细信息 View 。

例如这是我的表单组件，

import {Component, OnInit, OnDestroy, Input} from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import {Customer} from "../model/customer";
import {Router } from '@angular/router';
import {CustomerService} from "../service/customer.service";
import {CustomerProfileComponent} from "../customer-profile/customer-profile.component";

@Component({
  selector: 'app-new-customer',
  templateUrl: './new-customer.component.html',
  styleUrls: ['./new-customer.component.css']
})
export class NewCustomerComponent implements OnInit {

  @Input() customer: Customer;

  //this is only dev data do not use this in prod
  private countries = [];
  private customerSources = [];
  private secondarySources =[];

  //Create the forum group
  public newCustomerForm: FormGroup;
  public submitted: boolean; // keep track on whether form is submitted

  constructor(private fb: FormBuilder, public customerService: CustomerService,private router: Router) {

    this.countries = [
      {value:'UK'},
      {value:'Germany'},
      {value:'Turkey'},
      {value:'Italy'}
      ];

    this.customerSources = [
      {value: 'Through a friend or colleague (not a Client)'},
      {value: 'Through an existing Client'},
      {value: 'Direct Sales (e.g. cold call, direct mail, email)'},
      {value: 'Web Search e.g. Google'}
    ];

    this.secondarySources = [
      {value: '1st Hire'},
      {value: 'A Test Client With A Long Business Name'},
      {value: 'Abbigail West'}
    ];
  }

  ngOnInit() {
    this.newCustomerForm = this.fb.group({
      id:[''],
      company_name: ['', [<any>Validators.required, <any>Validators.minLength(5)]],
      vat:[''],
      address:[''],
      country:[''],
      first_name:[''],
      surname:[''],
      phone:[''],
      email:['',[<any>Validators.required, <any>Validators.minLength(5)]],
      customer_sources:[''],
      secondary_sources:['']
    });
  }

这是我的表单 html，

 <form [formGroup]="newCustomerForm" novalidate (ngSubmit)="saveNewCustomer(newCustomerForm.value, newCustomerForm.valid)">
    <section>
      <aside>
        <p>Once you've added your new <b>Client</b>, you can come back and allow them access to view their <b>Invoices</b> &amp; <b>Payments</b> - they can also make <b>Payments</b> via Paypal if you have it enabled.</p>
      </aside>


      <input type="hidden" name="id"  formControlName="id"/>

      <h4>New Client Details</h4>
      <md-input-container>
        <input mdInput type="text" name="company_name" placeholder="Customer Name" formControlName="company_name" />
        <small [hidden]="newCustomerForm.controls.company_name.valid || (newCustomerForm.controls.company_name.pristine && !submitted)">
          Customer Name is required (minimum 5 characters).
        </small>
      </md-input-container>

      <md-input-container>
        <input mdInput type="text" name="vat"  placeholder="VAT Number" formControlName="vat"/>
      </md-input-container>

      <md-input-container>
        <input mdInput type="text" name="address"  placeholder="Address" formControlName="address" />
      </md-input-container>

      <md-select placeholder="Country" name="country" formControlName="country" >
        <md-option *ngFor="let country of countries" [value]="country.value" >
          {{country.value}}
        </md-option>
      </md-select>

      <h4>Your Primary Contact</h4>
      <div class="left-column">
        <md-input-container>
          <input mdInput type="text" name="first_name"  placeholder="First Name" formControlName="first_name" />
        </md-input-container>
      </div>

      <div class="left-column">
        <md-input-container>
          <input mdInput type="text" name="surname"  placeholder="surname" formControlName="surname" />
        </md-input-container>
      </div>

      <div class="clearfix"></div>

      <div class="left-column">
        <div class="left-column">
          <md-input-container>
            <input mdInput type="text" name="phone"  placeholder="Phone" formControlName="phone"/>
          </md-input-container>
        </div>
      </div>

      <div class="right-column">
        <div class="left-column">
          <md-input-container>
            <input mdInput type="text" name="email"  placeholder="Email" formControlName="email"/>
            <small [hidden]="newCustomerForm.controls.email.valid || (newCustomerForm.controls.email.pristine && !submitted)">
              Email is required (minimum 5 characters).
            </small>
          </md-input-container>
        </div>
      </div>

      <div class="clearfix"></div>
      <h4>Customer Source</h4>
      <div class="left-column">
        <md-select placeholder="How were you introduced to this Client?" formControlName="customer_sources">
          <md-option *ngFor="let cs of customerSources" [value]="cs.value" >
            {{cs.value}}
          </md-option>
        </md-select>
      </div>

      <div class="right-column">
          <md-select placeholder="Which Client introduced you?" formControlName="secondary_sources">
            <md-option *ngFor="let ss of secondarySources" [value]="ss.value" >
              {{ss.value}}
            </md-option>
          </md-select>
      </div>
      <div class="clearfix"></div>
    </section>

    <aside>
      <div class="right-aside">
        <button type="submit" class="cancel">Cancel</button>
        <button type="submit" class="save">Save</button>
      </div>
      <div class="clearfix"></div>
    </aside>
    </form>

客户服务在我的 app.module 中。我在这里保存数据并将用户移动到新页面。

  saveNewCustomer(customer: Customer, isValid: boolean){
    if(isValid){
      this.submitted = true; // set form submit to true
      this.customerService.saveNewCustomer(customer)
        .subscribe(
          res => this.customer,
          error => console.log(<any>error)
        );

      this.router.navigateByUrl('/earning/customers/profile');
    }
  }


} 

这是我希望客户对象使用的组件，以便它出现在 View 中。

import {Component, OnInit, Input} from '@angular/core';
import {Customer} from "../model/customer";
import {NewCustomerComponent} from "../new-customer/new-customer.component";

@Component({
  selector: 'app-customer-profile',
  templateUrl: './customer-profile.component.html',
  styleUrls: ['./customer-profile.component.css'],
  providers:[NewCustomerComponent]
})
export class CustomerProfileComponent implements OnInit {

 @Input() customer: Customer;

  constructor() {
    console.log(this.customer);
  }

  ngOnInit() {
  }

}

<main>
  <header>
    <h4>&nbsp;</h4>
    <h1><strong><i></i>Customer profile</strong></h1>
    </header>
  <article>
    <section>
      <p></p>

      <p>
        {{customer}}
      </p>
      </section>
    </article>
  </main>

但客户在 CustomerProfileComponent 中未定义。我不确定我做错了什么。如果有人能指出我正确的方向，将不胜感激。

更新以包含基于建议的服务等级

import { Injectable } from '@angular/core';
import {Http, Response, Headers, RequestOptions} from '@angular/http';
import {CookieService} from "angular2-cookie/services/cookies.service";

import {Observable, Subject} from "rxjs";
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import {Customer} from "../model/customer";


@Injectable()
export class CustomerService {

  private csrfToken;
  private newCustomerUrl = "/earning/customers/new";
  private customer = new Subject<Object>();

  customer$ = this.customer.asObservable();

  constructor(public http: Http, private cookieService: CookieService) {
    this.getCsrfToken();
  }

  getCsrfToken(){
    this.csrfToken = this.cookieService.get("PLAY_SESSION").substring(this.cookieService.get("PLAY_SESSION").indexOf("csrfToken"));
  }

  saveNewCustomer(customer:Customer): Observable<Customer>{

    let headers = new Headers({
      'Content-Type':'application/json'
    });

    let options = new RequestOptions({ headers: headers });

    return this.http.post(this.newCustomerUrl+"?"+this.csrfToken, customer, options) // ...using post request
      .map((res:Response) => res.json()) // ...and calling .json() on the response to return data
      .catch(this.handleError); //...errors if any
  }

  private handleError (error: Response) {
    return Observable.throw('Internal server error: ' + error);
  }

  emitCustomer(customer) {
    this.customer.next(customer);
  }


}

Answer 1

如前所述，共享服务将是一个不错的选择。以下示例通过服务在组件之间共享对象:

您的服务:

public sharedCustomer = {};

组件，在您从 API 收到客户后，将客户推送到服务:

  this.customerService.saveNewCustomer(customer)
    .subscribe(res => {
       this.customer = res;
       this.customerService.sharedCustomer = this.customer;
       this.router.navigateByUrl('/earning/customers/profile');
    });
  }

请注意，我在订阅和导航内部发出客户，以确保客户正确存储在服务中，并且在此之前不会离开页面.

然后在您的详细信息页面中:

ngOnInit() {
  this.customer = this.customerService.sharedCustomer;
}