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中设置message属性的值并尝试在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 DEMO

STACKBLITZ DEMO

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