एक घटक से दूसरे में मूल्य कैसे भेजें?

Question

मैं एक componenet जिसमें मैं एक इनपुट क्षेत्र और बटन मैं दूसरे component.I diplaying रहा एक और घटक के एक घटक से डेटा भेजना चाहते button.On क्लिक कर?

मैं एक घटक से दूसरे घटक में डेटा कैसे भेजूंगा .. मुझे इनपुट मान (इनपुट इनपुट क्षेत्र में कभी भी उपयोगकर्ता प्रकार) भेजने की आवश्यकता है, मुझे अगले घटक या अगले पृष्ठ पर दिखाना होगा। बटन पर क्लिक करें। डेटा भेजने के लिए कैसे ? यहाँ मेरी 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']); 
    } 

} 

Answer 1

ओह !! हो सकता है कि मैं सवाल का जवाब देने में बहुत देर हो चुकी हो! लेकिन कभी नहीं mind.This आप मदद कर सकता है या रूटर, साझा-सेवा का उपयोग घटकों और साझा-वस्तु साझा-सेवा के भीतर इस्तेमाल किया के बीच डाटा साझा करने के लिए अन्य। मुझे उम्मीद है कि यह निश्चित रूप से मदद करेगा।

Answer

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; 
    } 
} 

Answer 2

तुम सब, एक सेवा बनाने के दोनों घटकों में यह इंजेक्षन, veriable सेवा और अन्य घटक में यह उपयोग करने के लिए इनपुट मान असाइन करना है। क्षमा भाई लेकिन 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); 
} 

Answer 3

इसकी हमेशा बेहतर एक बैकएंड और एक सेवा को फोन बैकएंड डेटा प्राप्त करने के लिए। पहले आप सेवा करने के लिए इनपुट डेटा पोस्ट और NodeJS या डेटाबेस के माध्यम से कुछ डेटाबेस से कि डेटा प्राप्त करने की जरूरत है। यही सबसे अच्छा तरीका डेटा के कुछ प्राथमिक कुंजी के आधार पर है कि प्राप्त करने के लिए किया जाएगा कम से कम कैसे उद्यम क्षुधा वास्तविकता में काम