webentwicklung-frage-antwort-db.com.de

Wie kann ich einen Wert von einer Komponente zur anderen senden?

Ich mache eine Komponente, in der ich ein Eingabefeld und eine Schaltfläche habe. Auf Knopfdruck zeige ich die zweite Komponente an. Ich möchte Daten von einer Komponente zu einer anderen Komponente senden?

wie werde ich Daten von einer Komponente an eine andere senden .. Ich muss einen Eingabewert senden (welcher Benutzertyp muss im Eingabefeld eingegeben werden), den ich auf der nächsten Komponente oder auf der nächsten Seite anzeigen muss. 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']);
  }

}
8
user944513

Oh!! Vielleicht bin ich zu spät, um die Frage zu beantworten! Dies kann Ihnen jedoch helfen, Daten mit Hilfe von Router, Shared-Service und Shared-Object gemeinsam mit Shared-Service zu verwenden. Ich hoffe das wird sicherlich helfen.

Antworten

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

Alles was Sie tun müssen, ist einen Dienst zu erstellen, ihn in beide Komponenten einzuspeisen, den Dienst verifizierbar mit dem Eingabewert zu versehen und in der anderen Komponente darauf zuzugreifen. Hier ist der Code:

BEARBEITEN:

Machen Sie zuerst diesen Datendienst:

export class DataService{
     dataFromService;}

Dann spritzen Sie das in Ihre erste Komponente:

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 injizieren Sie eine andere Komponente und greifen Sie auf den Wert zu: 

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

es ist immer besser, ein Backend und einen Service zu haben, der das Backend aufruft, um Daten abzurufen. Zuerst müssen Sie die Eingabedaten an den Dienst senden und diese Daten aus einer Datenbank über nodejs oder die Datenbank abrufen. Dies wäre der schönste Weg Um dies anhand eines Primärschlüssels der Daten zu erhalten atleast, wie Unternehmensanwendungen in der Realität funktionieren

0
vishu handa