如何将数据从 Subject observable 推送到组件中的数组？答案

【问题标题】：How do I push data from a Subject observable to an array in the component?如何将数据从 Subject observable 推送到组件中的数组？
【发布时间】：2020-11-25 15:07:12
【问题描述】：

我正在尝试将消息推送到已在组件中声明为变量的数组中。我正在使用一项服务并创建了一个可观察的主题，以从一个组件获取数据并将其注入另一个组件。当我在订阅变量后尝试将数据推送到数组中时，它会临时更新，但是当我打开该组件时，不会推送数据。当我从订阅方法内部控制台日志时，数组会更新，但一旦我打开该组件，它就会重置。我不知道是什么问题。这是代码：

服务.ts

import { Injectable } from '@angular/core';
import { User } from './user';
import { Subject } from 'rxjs';

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

  private message = new Subject<string>();

  sourceMessage$ = this.message.asObservable();

  constructor() { }

  sendMessage(message: string) {
    this.message.next(message);
  }
}

接收器组件

import { Component, OnInit } from '@angular/core';
import { SerService } from '../ser.service';
import { User } from "../user";

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  public messages = ['hi', 'hello', 'bye'];

  constructor(private _service: Service) { }

  ngOnInit() {
    this._service.message$
      .subscribe(
        message => {
          this.messages.push(message);
        }
      );
  }
}

发送者组件

import { Component, OnInit } from '@angular/core';
import { SerService } from '../ser.service';
import { User } from '../user';

@Component({
  selector: 'app-sign-up',
  templateUrl: './sign-up.component.html',
  styleUrls: ['./sign-up.component.css']
})
export class SignUpComponent {

  userModel = new User('', '', '', '', false);

  constructor (private _service : SerService) {}

  onSubmit(){
      this._service.sendMessage(this.userModel.message);
  }

}

我无法更新消息数组。如何以最少的更改做到这一点？

【问题讨论】：

有点不清楚如何回答你的问题。我怀疑你有一些拼写错误（登录组件中的服务是SerService 和message$ 应该是sourceMessage$？如果是这样，看起来你有各种各样的竞争条件。很可能你在打电话在登录组件订阅之前onSubmit。根据您的需要，将消息从Subject 更改为ReplaySubject 可能会解决您的问题。
服务上没有属性message$。有一个属性sourceMessage$。

标签： javascript angular typescript

【解决方案1】：

您可以使用 BehaviourSubject 创建服务以将数据从一个组件发送到另一个组件

服务：

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

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

  private userDetails = new BehaviorSubject<any>('');
  currentUserDetails = this.userDetails.asObservable();

  constructor() { }

  sendUserDetails(message){
    this.userDetails.next(message)
  }
}

发送方组件：

import { DataService } from '/services/data.service';

export class SignupComponent implements OnInit {

  public userDetails;

  constructor(private _dataService: DataService) {}

  ngOnInit(){
    userDetails = new User('', '', '', '', false);
    this._dataService.sendUserDetails(this.userDetails);
  }

}

接收器组件

import { DataService } from '/services/data.service';

export class LoginComponent implements OnInit {

  public userDetails;

  constructor(private _dataService: DataService) {}

  ngOnInit(): void {
    this._dataService.currentUserDetails.subscribe(userDetails => this.userDetails = userDetails);
  }

块引用

【讨论】：