[英]Send a number value from one component to another component in Angular2
[英]How to send a value from one component to another?
我制作了一個組件,其中我有一個輸入字段和按鈕。單擊按鈕我正在繪制第二個組件。我想將數據從一個組件發送到另一個組件?
我將如何將數據從一個組件發送到另一個組件..我需要發送輸入值(輸入字段中的用戶類型)我需要在下一個組件或下一頁顯示。單擊按鈕。如何發送數據? 這是我的傻瓜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']);
}
}
哦!! 可能我來不及回答這個問題! 但沒關系。這可能會幫助您或其他人使用與共享服務一起使用的路由器,共享服務和共享對象在組件之間共享數據。 我希望這肯定會有所幫助。
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和共享對象
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;
}
}
您所要做的就是提供服務,將其注入兩個組件,將輸入值分配給可驗證的服務,並在另一個組件中訪問它。 抱歉兄弟,但不知道創建plunker。 這是代碼:
編輯:
首先制作這個數據服務:
export class DataService{
dataFromService;}
然后在第一個組件中注入:
import {Component,View} from 'angular2/core';
import {Router} from 'angular2/router';
import {DataService} from 'path/to/dataservice';
@Component({
templateUrl: 'home/home.html'
})
export class AppComponent {
toDoModel;
constructor(private _router:Router, public dataService : DataService) {
}
onclck(inputValue){
alert(inputValue)
this.dataService.dataFromService = inputValue;
this._router.navigate(['Second']);
}
}
然后注入另一個組件並訪問該值:
import {Component,View} from 'angular2/core';
import {DataService} from 'path/to/dataservice';
export secondComponent{
constructor(public dataService : DataService){
console.log(this.dataService.dataFromService);
}
最好有一個后端和一個服務調用后端來獲取數據。 首先,您需要將輸入數據發布到服務,並通過nodejs或數據庫從某個數據庫獲取該數據。 這將是基於數據的一些主鍵來實現這一點的最好方法,至少企業應用程序如何在現實中運行
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.