javascript - angular2 在组件、getter 和 setter 之间共享数据

Question

这个问题已经有答案了:

Angular2 - Share data between components using services (3 个回答)

已关闭 5 年前。

我有一个与这里的人相同的问题:

Angular 2 Setter and Getter

提供的解决方案不足以让我的项目正常运行，因此我将用更多详细信息解释我的情况，看看你们是否可以帮助我!

我有一个服务 dataBase.service.ts :

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

@Injectable()
export class dataBaseService{

    serviceData: string;

    get data():string{
        return this.serviceData;
    }

    set data(value:string){
        this.serviceData = value;
    }
}

这个服务显然是作为提供者添加到app.module.ts中的。

在我的组件 A 上，我有:

import { Component, OnInit } from '@angular/core';
import {dataBaseService} from "../dataBase.service";




@Component({
  selector: 'app-tipo',
  templateUrl: './tipo.component.html',
  styleUrls: ['./tipo.component.scss'],
    providers: [dataBaseService]
})
export class A implements OnInit {


  constructor( public dataService:dataBaseService) {
      this.dataService.serviceData = 'hello';
  }



  ngOnInit() {
      console.log(this.dataService.serviceData);
  }

}

到这里一切都很好。如果我在控制台上显示:

console.log(this.dataService.serviceData);它按预期返回“你好”

但是在我的下一个组件上，当我再次打印相同的数据时，它显示未定义:

import { Component, OnInit } from '@angular/core';
import {dataBaseService} from "../dataBase.service";

@Component({
  selector: 'app-modelo',
  templateUrl: './modelo.component.html',
  styleUrls: ['./modelo.component.scss'],
    providers: [dataBaseService]
})
export class ModeloComponent implements OnInit {



  ngOnInit() {
      console.log(this.dataService.serviceData);      
  }
    constructor(public dataService: dataBaseService) {

    }

}

console.log(this.dataService.serviceData);它返回“未定义”..那么，如何保存放在第一个组件上的数据并能够在另一个组件上显示它呢？我错过了什么？

更新:

像我这样的一些人没有找到另一个问题的答案，比如堆栈上的这个问题，这是因为您必须全局添加它们(在 module.ts 上)，而不是单独添加提供程序!!!!!!! !!!!!

Answer 1

正如您所说，您已经在模块级别添加了提供程序，请尝试注释掉组件中的提供程序声明。