共享服务无法将数据传递到下一个组件

Question

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() {

      }

    }

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() {

  }

}

@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

当您在组件级别设置providers数组时，在本例中，这意味着您有两个独立的服务实例。

您需要在ngmoduleproviders数组中声明服务，然后这两个组件（以及该模块中的任何其他组件）将具有相同的服务实例。

因此，删除组件中的providers数组，而是将服务添加到ngmodule中的providers数组。

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

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