如何将值从一个组件发送到另一个组件? [英] How to send a value from one component to another?
问题描述
我制作了一个组件,其中有一个输入字段和按钮.单击按钮时,我正在显示第二个组件.我想将数据从一个组件发送到另一个组件?
I make a componenet in which I have one input field and button.On click of button I am diplaying the second component.I want to send data from one component to another component ?
我如何将数据从一个组件发送到另一个组件..我需要发送输入值(用户在输入字段中输入的内容)我需要在下一个组件或下一页显示.单击按钮.如何发送数据?这是我的plunkerhttp://plnkr.co/edit/IINX8Zq8J2LUTIyf4DYD?p=preview
how I will send data from one component to another ..I need to send input value (what ever user type in input field ) I need to show on next component or next page .On button click .how to send data ? here is my plunker http://plnkr.co/edit/IINX8Zq8J2LUTIyf4DYD?p=preview
import {Component,View} from 'angular2/core';
import {Router} from 'angular2/router';
@Component({
templateUrl: 'home/home.html'
})
export class AppComponent {
toDoModel;
constructor(private _router:Router) {
}
onclck(inputValue){
alert(inputValue)
this._router.navigate(['Second']);
}
}
推荐答案
哦!!可能是我来不及回答这个问题了!但没关系.这可能会帮助您或其他人使用路由器、共享服务和共享对象在共享服务中使用的组件之间共享数据.我希望这肯定会有所帮助.
Oh!! may be I' m too late to answer the question! But never mind.This might help you or other to share data between components using Router,Shared-Service and Shared-object used withing shared-service. I hope this will surely help.
Boot.ts
import {Component,bind} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {Router,ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,APP_BASE_HREF,LocationStrategy,RouteParams,ROUTER_BINDINGS} from 'angular2/router';
import {SharedService} from 'src/sharedService';
import {ComponentFirst} from 'src/cone';
import {ComponentTwo} from 'src/ctwo';
@Component({
selector: 'my-app',
directives: [ROUTER_DIRECTIVES],
template: `
<h1>
Home
</h1>
<router-outlet></router-outlet>
`,
})
@RouteConfig([
{path:'/component-first', name: 'ComponentFirst', component: ComponentFirst}
{path:'/component-two', name: 'ComponentTwo', component: ComponentTwo}
])
export class AppComponent implements OnInit {
constructor(router:Router)
{
this.router=router;
}
ngOnInit() {
console.log('ngOnInit');
this.router.navigate(['/ComponentFirst']);
}
}
bootstrap(AppComponent, [SharedService,
ROUTER_PROVIDERS,bind(APP_BASE_HREF).toValue(location.pathname)
]);
第一组件
import {Component,View,bind} from 'angular2/core';
import {SharedService} from 'src/sharedService';
import {Router,ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,APP_BASE_HREF,LocationStrategy,RouteParams,ROUTER_BINDINGS} from 'angular2/router';
@Component({
//selector: 'f',
template: `
<div><input #myVal type="text" >
<button (click)="send(myVal.value)">Send</button>
`,
})
export class ComponentFirst {
constructor(service:SharedService,router:Router){
this.service=service;
this.router=router;
}
send(str){
console.log(str);
this.service.saveData(str);
console.log('str');
this.router.navigate(['/ComponentTwo']);
}
}
第二组件
import {Component,View,bind} from 'angular2/core';
import {SharedService} from 'src/sharedService';
import {Router,ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,APP_BASE_HREF,LocationStrategy,RouteParams,ROUTER_BINDINGS} from 'angular2/router';
@Component({
//selector: 'f',
template: `
<h1>{{myName}}</h1>
<button (click)="back()">Back<button>
`,
})
export class ComponentTwo {
constructor(router:Router,service:SharedService)
{
this.router=router;
this.service=service;
console.log('cone called');
this.myName=service.getData();
}
back()
{
console.log('Back called');
this.router.navigate(['/ComponentFirst']);
}
}
共享服务和共享对象
import {Component, Injectable,Input,Output,EventEmitter} from 'angular2/core'
// Name Service
export interface myData {
name:string;
}
@Injectable()
export class SharedService {
sharingData: myData={name:"nyks"};
saveData(str){
console.log('save data function called' + str + this.sharingData.name);
this.sharingData.name=str;
}
getData:string()
{
console.log('get data function called');
return this.sharingData.name;
}
}
这篇关于如何将值从一个组件发送到另一个组件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!