如何将对象从一个组件传递到另一个组件以在angular2中构建数据模型？

Question

我的应用程序有两种形式，来自两个 components.In 第一种形式我使用用户名，第二种形式我使用用户地址和联系信息。我如何构建如下所示的对象。

提前致谢

我想构建一个这样的对象

{
  "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 来检索它。

这样，您的对象始终是最新的，而不是每次需要时都重新创建。

如何将对象从一个组件传递到另一个组件以在angular2中构建数据模型？

how to pass an object from one component to another to build a data model in angular2?

typescript

angular2-forms

angular

我想构建一个这样的对象

这是我的代码

username.comonent.ts

details.component.ts