Question

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

我创建了一个共享服务（DataService）。我在HomeComponent和ProfileComponent中都注入了服务，但是当我在HomeComponent中设置message属性的值并尝试在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 的链接

Answer 2

每次将服务注入组件时，都会生成一个新实例。但是，在这种情况下，我建议您按以下方式使用BehaviorSubject，

@Injectable()
export class SharedService {
  private messageSource = new BehaviorSubject<string>("default message");
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(message: string) {
    this.messageSource.next(message)
}

STACKBLITZ DEMO

Angular 7共享服务未共享

2 个答案: