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

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

      }

    }

Bellow 是第二个组件，我需要从第一个组件传递数据，我得到的空对象是 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 是用于两个组件之间通信的共享服务

从 '@angular/core' 导入 {Component, Injectable,Input,Output,EventEmitter}

//名称服务导出接口(interface) myData { 名称:字符串， lname:字符串

@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 数组时，这意味着在这种情况下您有两个 独立的服务实例。

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

因此删除组件中的 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!
})