javascript - Angular 7 共享服务不共享

Question

我是 Angular 的新手，我想在导航后将数据从一个组件 (HomeComponent) 传递到另一个组件 (ProfileComponent)。

我创建了一个共享服务(数据服务)。我在 HomeComponent 和 ProfileComponent 中都注入(inject)了服务，但是当我在 HomeComponent 中设置消息属性的值并尝试在 ProfileComponent 中检索它时，该值是未定义的，因为 DataService 不是同一个实例。

DataService 是在 AppModule 的 providers 数组中注册的，所以它应该是一个共享服务并且总是同一个实例，对吗？

提前致谢

DataService.ts

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

@Injectable({
  providedIn: 'root'
})
export class DataService {

  message:string;

  constructor() { }
}

HomeComponent.ts

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor(private data:DataService) { }

  ngOnInit() {
    this.data.message = "hello world";
  }

}

ProfileComponent.ts

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

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit {

  private message : string;//undefined

  constructor(private data:DataService) { }

  ngOnInit() {
    this.message = this.data.message;
  }

}

AppModule.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DataService } from './services/data/data.service';
import { HomeComponent } from './home/home.component';
import { ProfileComponent } from './profile/profile.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ProfileComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [DataService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

我知道这是一个 2 年的问题，但 Google 将其放在搜索结果的顶部

现在，Angular 文档对此更加清楚(或者我们可以更容易地找到它)，它被称为“Singleton Services”解释此“错误”的部分是 The ForRoot Pattern它说:

“如果一个模块同时定义了提供者和声明(组件、指令、管道)，那么在多个功能模块中加载该模块将重复服务的注册。这可能会导致多个服务实例并且服务将不再运行作为一个单例。”

总而言之，如果您在服务 (DataService.ts) 中定义此 providedIn: root，如下所示

@Injectable({ providedIn: 'root' })

您需要避免在您的组件或模块上将服务定义为提供者。

AppModule.ts

...
imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [DataService], // This line is the problem
  bootstrap: [AppComponent]
....

希望对某人有所帮助，如果需要更多文档，请参阅 Singleton Services 的链接