时间戳

首页 > 解决方案 > 数据未在使用服务的组件之间传递

angular - 数据未在使用服务的组件之间传递

问题描述

我想将值从一个组件传递到另一个组件，但我的代码不起作用。下一页显示的值undefined。

这是我的服务班UtilityService.ts

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

@Injectable
({
  providedIn: 'root'
})

export class UtilityService {
  constructor() { }

  private message:string;

  public setMessage(message):void{

      this.message=message;
  }

  public readMessage():string {

      return this.message;
  }
}

这是我的第一个组件代码

import { Component, OnInit } from '@angular/core';
import { UtilityService } from '../UtilityService';

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css'],
  providers: [UtilityService]
})
export class ProductsComponent implements OnInit {
  private service;

  constructor(private employeeService: ProductService,utilityService: UtilityService) {

    this.service=utilityService;
    this.sendMessage();
  }

  private sendMessage():void {
    this.service.setMessage("h r u");
  }
}

这是我的第二个组件代码

import { Component } from '@angular/core';
import { UtilityService } from '../UtilityService';

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

export class DeviceListComponent implements OnInit {

  private service;
  private message:string;

  constructor(
    utilityService: UtilityService,
    private restApi: ProductService,
    private route: ActivatedRoute
  ){

    this.service=utilityService;
    this.readMessage();
  }

  private readMessage():void {
       this.message=this.service.readMessage();
       console.log("service msg: "+this.message);
    }
}

我已经关注了这篇文章。在console.log消息显示中undefined

标签： angulartypescript

解决方案

您已经在组件级别提供了服务。这意味着您的每个组件都有不同的UtilityService服务实例。您应该在已将您的组件包含到其声明数组中的模块中提供您的服务。

示例代码：

@NgModule({
  imports: [
     ],
  declarations: [DeviceListComponent,ProductsComponent 
  ],

  providers: [UtilityService],
})
export class ProductModule {}

推荐阅读