Как передать объект из одного компонента в другой, чтобы построить модель данных в Angular2?

angular typescript angular2-forms

341 просмотра

1 ответ

мое приложение имеет две формы, которые поступают из двух компонентов. В первой форме я беру имя пользователя, а во второй форме я беру адрес пользователя и контактную информацию. Как я могу построить объект, как показано ниже.

заранее спасибо

Я хочу построить такой объект

{
  "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));*/
           }
        }
Автор: Sukumar MS Источник Размещён: 08.11.2019 10:55

Ответы (1)


1 плюс

Решение

Как я понимаю, стандартный метод состоит в том, чтобы создать сервис и создать объект в этом сервисе, а затем внедрить его в каждый компонент, где вы можете сделать запрос к service.GetMyObject, чтобы получить его.

Таким образом, ваш объект всегда обновляется и не создается заново каждый раз, когда вам это нужно.

Автор: John Baird Размещён: 21.08.2016 03:10
Вопросы из категории :
32x32