Question

我有一个角度服务，它有两个字段，即＆＃34; itemName＆＃34;和＆＃34;数量＆＃34;。

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);
}

}

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

Answer 1

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

providers: [NetworkService]

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

Answer 2

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

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

Answer 3

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

Angular 2：通过服务传输数据

3 个答案: