Shared Service kann keine Daten zur nächsten Komponente passieren

Question

ich zwei Komponenten und ein Shared Service erstellt haben, möchte ich Daten von einer Komponente zur anderen wechseln, aber ich bin immer leeres Objekt unten ist der 1. Komponente

import { Component, OnInit } from '@angular/core'; 
import {SharedService} from './../shared.service'; 
import { Router, NavigationStart } from '@angular/router'; 



    @Component({ 
     selector: 'app-cone', 
     templateUrl: './cone.component.html', 
     styleUrls: ['./cone.component.css'], 
     providers: [SharedService] 
    }) 
    export class ConeComponent implements OnInit { 
    req = <any>{}; 
     constructor(public service:SharedService,private router:Router) { } 
     send(){ 
     this.req.fname= "ketan"; 
     this.req.lname= "pradhan"; 
     this.service.saveData(this.req); 
     console.log('str'); 
     this.router.navigate(['/apps/ctwo']); 
     } 

     ngOnInit() { 

     } 

    } 

Bellow ist die zweite Komponente, wo ich brauche, um die Daten aus dem 1. comonent passieren, ich bin immer leeres Objekt ist this.myName

import { Component, OnInit } from '@angular/core'; 
import {SharedService} from './../shared.service'; 
import { Router, NavigationStart } from '@angular/router'; 

@Component({ 
    selector: 'app-ctwo', 
    templateUrl: './ctwo.component.html', 
    styleUrls: ['./ctwo.component.css'], 
    providers: [SharedService] 
}) 
export class CtwoComponent implements OnInit { 
myName= <any>{}; 

    constructor(public service:SharedService,private router:Router) { 
    this.myName=this.service.getData(); 
     console.log(this.myName); 
    } 

    ngOnInit() { 

    } 

} 

Bellow geteilt wird Service, die

zwischen 2 Komponenten für die Kommunikation ist

Import {Component, injizierbare, Input, Output, EventEmitter} von '@ Winkel/Kern'

// Name Service Export-Schnittstelle myData { Name: string, lname: string }

@Injectable() 
export class SharedService { 
    sharingData: myData=<any>{}; 
    saveData(str){ 
    console.log('save data function called' + str.fname); 
    console.log(this.sharingData); 
    this.sharingData = str; 
    // this.sharingData.lname=str.lname; 
    console.log(this.sharingData) 
    } 
    getData() 
    { 
    console.log('get data function called'); 
    return this.sharingData; 
    } 
} 

Answer 1

Wenn Sie providers Arrays auf Komponentenebene festlegen, bedeutet dies, dass Sie in diesem Fall zwei separate Instanzen des Dienstes haben.

Sie müssen den Dienst stattdessen in Ihrem Array NgModuleproviders deklarieren, dann haben die beiden Komponenten (und alle anderen Komponenten in diesem Modul) dieselbe Instanz des Dienstes.

So entfernen Sie die providers Arrays in Ihren Komponenten, und fügen Sie stattdessen den Dienst zu Provider-Array in Ihrem NgModule.

@Component({ 
    selector: 'app-ctwo', 
    templateUrl: './ctwo.component.html', 
    styleUrls: ['./ctwo.component.css'], 
    // providers: [SharedService] // remove these! 
}) 

und stattdessen ....

@NgModule({ 
    imports: [ ... ], 
    declarations: [ .. ], 
    bootstrap: [ ... ], 
    providers: [ SharedService ] // here! 
})