Angular 7 共享服务不共享 [英] Angular 7 shared service is not shared

问题描述

我是 angular 新手，我试图在导航后将数据从一个组件 (HomeComponent) 传递到另一个组件 (ProfileComponent).

I am new to angular and I am trying to pass data from one component(HomeComponent) to another component(ProfileComponent) after navigation.

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

I created a shared service(DataService). I injected the service in both the HomeComponent and ProfileComponent but when I set the value of the message property in HomeComponent and try to retrieve it in the ProfileComponent the value is undefined because the DataService is not the same instance.

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

The DataService was registered in the AppModule in the providers array so it should be a shared service and always the same instance right?

提前致谢

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 { }

推荐答案

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

Each time you inject the service to your component, new instance is generated. However in this case i would recommend you to use BehaviorSubject as follows,

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

  constructor() { }

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

STACKBLITZ 演示

这篇关于Angular 7 共享服务不共享的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！