Angular 2 : 通过服务传输数据

Question

我有一个 angular 服务，它有两个字段，即 "itemName" 和 "quantity"。

import { Injectable } from '@angular/core';

@Injectable()
export class NetworkService {

  public itemName:String;
  public quantity:String;

  constructor() {

   }

 setItem(name:string,value:string){
      this.itemName = name;
     this.quantity = value;
     console.log("Set Item called name = "+this.itemName+" value = "+this.quantity);

   }
}

从我的组件 EditentryComponent 调用服务方法 setItem()。

import { Component, OnInit, ElementRef, ViewChild  } from '@angular/core';

import { NetworkService } from './../services/network.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-editentry',
  templateUrl: './editentry.component.html',
  styleUrls: ['./editentry.component.css'],
  providers : [NetworkService]
})

export class EditentryComponent implements OnInit {

constructor(private networkservice : NetworkService) {
}

ngOnInit():void {
}

getItems(){
 this.networkservice.setItemToEdit("apple","10");
 this.router.navigate(['/editreceipt']);
}

}

然后我尝试从第二个组件获取第一个组件设置的值 -

import { Component, OnInit } from '@angular/core';
import { NetworkService } from './../services/network.service';

@Component({
  selector: 'app-edit-receipt-component',
  templateUrl: './edit-receipt-component.component.html',
  styleUrls: ['./edit-receipt-component.component.css'],
  providers : [NetworkService]

})
export class EditReceiptComponentComponent implements OnInit {

constructor(private networkservice : NetworkService) { 
}

ngOnInit() {
  console.log("Item name = "+this.networkservice.itemName);
}

}

但是我得到 "Item name = undefined" 作为第二个组件的输出。我哪里错了？

Answer 1

您正在创建两个单独的服务实例，方法是将它们包含在每个组件的提供程序中

providers: [NetworkService]

您需要使用该服务的单例实例并且只在您的 app.module 中初始化该服务。因此，请尝试从您的组件提供商那里删除服务

Answer 2

您有两个服务实例。每个组件一个。您需要在更高级别（例如，在模块或父组件中）声明您的 NetworkService。

有关详细信息，请参阅：https://angular.io/guide/dependency-injection

Answer 3

要拥有单例服务，您必须在模块级别声明它并将其从组件提供者声明中删除。在您的情况下，它由 Angular 初始化为具有本地范围的服务。

Angular 2 : 通过服务传输数据

Angular 2 : Data transfer through service

angular-services

angular