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＆＃39;

导入{Component，Injectable，Input，Output，EventEmitter}

//名称服务导出接口myData { 名称：字符串， L-NAME：字符串 }

@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!
})

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

1 个答案: