如何將對象從一個組件傳遞到另一個組件以在angular2中建立數據模型？

Question

我的應用程序有兩種形式，它們由兩個部分組成。第一種形式是用戶名，第二種形式是用戶地址和聯系方式。 我如何建立一個對象，如下所示。

提前致謝

我想建立一個這樣的對象

{
  "Username": "riyaz",
  "addressline1": "happy home hostel",
  "addressline2": "yellareddy guda",
  "phone": "999999999",
  "displayname": "ragav Riyaz",
  "email": "riyaz.test@gmail.com"
}

這是我的代碼

username.comonent.ts

import { Component } from 'angular2/core';
 import { Router } from 'angular2/router';

    @Component({
      template:`
      <br>
    <div class="container">
      <div class="row">
        <div class="input-group  input-group-lg">
        <input  type="text" [(ngModel)]="restName" class="form-control" placeholder="Restaurant Name" >
    <span class="input-group-btn">
       <input  type="submit" class="btn" value="Continue" (click)="UserName(username); username=''" > 
        </span>
          </div>
       </div>
    </div>
    `,
     directives:[NameComponent]

    })

    export class NameComponent{

    constructor(private router:Router){}
    public user = {};

    RestName(name){
       var name = name.trim();
       var res= name.replace(/[^a-zA-Z]/g,'');
       var username = res.toLowerCase();

         this.user={
                title: username ,
                completed: false
            };
         console.log('**>'+JSON.stringify(this.user)); //single user name comes here

         this.router.navigate(['Details']);
       }
    }

details.component.ts

        import { Component } from 'angular2/core';
        import { Router } from 'angular2/router';
        import { NameComponent } from './rest-name.component';

        @Component({
          templateUrl:`
    <form #myform="ngForm" (ngSubmit)="Address()">
    <div>
      <button  class="btn">Continue
     </button>
          </div>
        <div class="input-group">
        <input type="text" ngControl="address1" [(ngModel)]="userDetails.address1" class="form-control">
         </div>
        <div class="input-group">
        <input type="text" ngControl="displayname" [(ngModel)]="userDetails.address1" class="form-control">
         </div>
        </div>
        <div class="input-group">
        <input type="text" ngControl="email" [(ngModel)]="userDetails.email" class="form-control">
         </div>
        </div>
        <div class="input-group">
        <input type="text" ngControl="phone" [(ngModel)]="userDetails.phone" class="form-control">
         </div>
    </form>
        `,

          directives:[NameComponent]
        })

        export class DetailsComponent{

          constructor(private router:Router){
          this.userDetails = {address1:'',displayname:'',email:'',phone:''};
          }

        Address(){
     console.log('in the details call '+JSON.stringify(this.userDetails ));
//user details comes here.i want to pass the first component username to second component details,to build an object. 
          /*this.user= this.userDetails ;
           console.log('**>'+JSON.stringify(this.user));*/
           }
        }

Answer 1

據我了解，標准方法是構建服務並在該服務中創建對象，然后將其注入到每個組件中，您可以在其中調用service.GetMyObject來檢索它。

這樣，您的對象將始終是最新的，並且不會在每次需要時都重新創建。