[英]how to pass an object from one component to another to build a data model in angular2?
我的应用程序有两种形式,它们由两个部分组成。第一种形式是用户名,第二种形式是用户地址和联系方式。 我如何建立一个对象,如下所示。
提前致谢
{
"Username": "riyaz",
"addressline1": "happy home hostel",
"addressline2": "yellareddy guda",
"phone": "999999999",
"displayname": "ragav Riyaz",
"email": "riyaz.test@gmail.com"
}
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']);
}
}
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));*/
}
}
据我了解,标准方法是构建服务并在该服务中创建对象,然后将其注入到每个组件中,您可以在其中调用service.GetMyObject来检索它。
这样,您的对象将始终是最新的,并且不会在每次需要时都重新创建。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.