So senden Sie einen Wert von einer Komponente zur anderen?

Ich eine componenet, in dem ich ein Eingabefeld und button.Klicken Sie auf der Taste bin ich diplaying der zweiten Komponente.Ich möchte zum senden von Daten von einer Komponente zu einer anderen Komponente ?

wie sende ich Daten von einer Komponente zur anderen ..ich brauche zum senden von input-Wert (was auch immer Benutzer geben Sie im Eingabefeld ) ich muss auf die nächste Komponente oder der nächsten Seite .Auf den button klicken .wie zum senden von Daten ?
hier ist mein 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']);
  }

}

InformationsquelleAutor user944513 | 2016-01-15

Oh!! vielleicht habe ich' m zu spät um die Frage zu beantworten!
Aber never mind.Dies könnte helfen, die von Ihnen oder anderen zum Austausch von Daten zwischen Komponenten mit Router,Shared-Service-und Shared-Objekt verwendet, innerhalb eines shared-service. Ich hoffe, das wird sicher helfen.

Antwort

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

Dies ist genau das, was ich suchte.Gott sei Dank fand ich diese Lösung. Danke @micronyks für diese Antwort. 🙂 🙂
das ist toll es hat dir geholfen.

InformationsquelleAutor micronyks

Alles, was Sie tun müssen, ist ein service, injizieren es in beide Komponenten, weisen Sie den Eingangswert, um den service nachweislich und es in der anderen Komponente.
Sorry bro, aber nicht wissen, zu erstellen plunker. Hier ist der code :

EDIT :

Ersten machen dieses Daten-service :

export class DataService{
     dataFromService;}

Dann injizieren Sie diese in Ihrem ersten Bestandteil :

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

}

Dann Spritzen Sie in einer anderen Komponente und den Zugriff auf den Wert :

import {Component,View} from 'angular2/core';
import {DataService} from 'path/to/dataservice';
export secondComponent{
   constructor(public dataService : DataService){
   console.log(this.dataService.dataFromService);
}

könnten Sie bitte teilen plunker

InformationsquelleAutor binariedMe

0

es ist immer besser, ein backend und ein service-Aufruf von backend-Daten zu erhalten .
zuerst müssen Sie post von der input-Daten-service und erhalten, dass die Daten aus einigen Datenbank über nodejs oder einer Datenbank.
Das wäre die schönste Art und Weise zu erhalten, die basierend auf einige Primärschlüssel der Daten
atleast, wie enterprise apps funktionieren in der Realität

InformationsquelleAutor vishu handa

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.