如何从一个组件发送一个值到另一个？ [英] How to send a value from one component to another?
本文介绍了如何从一个组件发送一个值到另一个？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我做一个componenet中，我有一个输入框和按钮，我diplaying第二component.I的button.On点击想从一个组件发送数据到另一个部件？
我如何从一个组件发送数据到另一个..我需要发送的输入值（输入字段什么都用户类型）我需要显示下组件或下一个页面。对按钮点击。如何发送数据？
这里是我的plunker
http://plnkr.co/edit/IINX8Zq8J2LUTIyf4DYD?p=$p$pview
进口{组件，查看}从'angular2 /核心;
进口{}路由器从'angular2 /路由器;@零件（{
templateUrl：家/ home.html做为
}）
出口类AppComponent {
toDoModel;
构造函数（私人_router：路由器）{
} onclck（inputValue将）{
警报（inputValue将）
this._router.navigate（['二']）;
}}
解决方案
哦！可能是我太晚来回答这个问题！
但从来没有mind.This可能会帮助你或其他共享使用路由器，共享服务和共享对象使用withing共享服务组件之间的数据。我希望这肯定会有所帮助。
Boot.ts
进口{组件，绑定}从'angular2 /核心;从angular2 /平台/浏览器的进口{}引导;进口{路由器，ROUTER_PROVIDERS，RouteConfig，ROUTER_DIRECTIVES，APP_BASE_HREF，LocationStrategy，RouteParams，ROUTER_BINDINGS}从'angular2 /路由器;从SRC / sharedService进口{SharedService}; 进口{} ComponentFirst从'SRC /锥';
进口{} ComponentTwo从'SRC / ctwo';
@零件（{
选择：我的应用，
指令：[ROUTER_DIRECTIVES]
模板：`
＆LT; H1＆GT;
家
＆LT; / H1＆GT; ＆LT;路由器出口＆GT;＆LT; /路由器出口＆GT;
`}）@RouteConfig（[
{路径：'/组件第一'，名称：'ComponentFirst'，成分：ComponentFirst}
{路径：'/组件的两个，名称：'ComponentTwo'，成分：ComponentTwo}]）出口类AppComponent实现的OnInit { 构造器（路由器：路由器）
{
this.router =路由器;
} ngOnInit（）{
的console.log（'ngOnInit'）;
this.router.navigate（['/ ComponentFirst']）;
}} 引导（AppComponent，[SharedService，
ROUTER_PROVIDERS，绑定（APP_BASE_HREF）.toValue（location.pathname）
]）;
FirstComponent
进口{组件，浏览，约束}从'angular2 /核心;
从SRC / sharedService进口{SharedService};
进口{路由器，ROUTER_PROVIDERS，RouteConfig，ROUTER_DIRECTIVES，APP_BASE_HREF，LocationStrategy，RouteParams，ROUTER_BINDINGS}从'angular2 /路由器;
@零件（{
//选择：'F'，
模板：`
＆LT; DIV＆GT;＆LT;输入#myVal类型=文本＆GT;
＆LT;按钮（点击）=派（myVal.value）＆GT;发送和LT; /按钮＆GT;
`}）出口类ComponentFirst { 构造函数（服务：SharedService，路由器：路由器）{
this.service =服务;
this.router =路由器;
} 发送（STR）{
的console.log（STR）;
this.service.saveData（STR）;
的console.log（'海峡'）;
this.router.navigate（['/ ComponentTwo']）;
}}
SecondComponent
进口{组件，浏览，约束}从'angular2 /核心;
从SRC / sharedService进口{SharedService};
进口{路由器，ROUTER_PROVIDERS，RouteConfig，ROUTER_DIRECTIVES，APP_BASE_HREF，LocationStrategy，RouteParams，ROUTER_BINDINGS}从'angular2 /路由器;
@零件（{
//选择：'F'，
模板：`
＆LT; H1＆GT; {{MYNAME}}＆LT; / H1＆GT;
＆LT;按钮（点击）=后面的（）＆GT;返回＆LT;按钮和GT;
`}）出口类ComponentTwo { 构造器（路由器：路由器，服务：SharedService）
{
this.router =路由器;
this.service =服务;
的console.log（'锥称为'）;
this.myName = service.getData（）;
}
背部（）
{
的console.log（'回叫'）;
this.router.navigate（['/ ComponentFirst']）;
}}
SharedService和共享对象
进口{组件，注射，输入，输出，EventEmitter}从'angular2 /核心//名称服务
导出接口的myData {
名称：字符串;
}@Injectable（）
出口类SharedService {
sharingData：MYDATA的= {名字：nyks};
SAVEDATA（STR）{
的console.log（'保存称为数据功能+ STR + this.sharingData.name）;
this.sharingData.name =海峡;
}
的getData：字符串（）
{
的console.log（'获取称为数据功能'）;
返回this.sharingData.name;
}
}
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 ?
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)
]);
FirstComponent
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']);
}
}
SecondComponent
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']);
}
}
SharedService and shared Object
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屋！
查看全文
