Come inviare un valore da un componente a un altro?

Question

Faccio un componenet in cui ho un campo di input e un pulsante. Con un clic del pulsante sto riproducendo il secondo componente. Voglio inviare i dati da un componente a un altro componente?

Come invierò i dati da un componente a un altro. Devo inviare un valore di input (qualsiasi tipo di utente nel campo di input) Devo mostrare sul prossimo componente o sulla pagina successiva. Sul pulsante clic. Come inviare i dati ? qui è la mia 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

Oh !! Forse sono in ritardo per rispondere alla domanda! Ma non importa. Questo potrebbe aiutare te o altri a condividere i dati tra i componenti usando Router, Shared-Service e Shared-object usati con il servizio condiviso. Spero che questo possa sicuramente aiutare.

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 e oggetto condiviso

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

Tutto quello che dovete fare è fare un servizio, iniettare in entrambi i componenti, assegnare il valore di ingresso al servizio veriable e accedervi in ​​un altro componente. Siamo spiacenti ma non so come creare il plunker. Ecco il codice:

EDIT:

Primo rendere questo servizio dati:

export class DataService{ 
    dataFromService;} 

poi iniettare questo nel vostro primo componente:

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']); 
} 

} 

poi iniettare in un altro componente e l'accesso il valore:

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

la sua sempre meglio avere un back-end e back-end un servizio di chiamate per ottenere i dati. per prima cosa è necessario inviare i dati di input al servizio e ottenere tali dati da qualche database tramite nodejs o database. Questo sarebbe il modo più bello per ottenere che sulla base di alcune chiave primaria dei dati atleast come applicazioni aziendali funzionano in realtà