javascript - 我如何将 Subject 可观察对象的数据推送到组件中的数组？

我正在尝试将一条消息推入已经在组件中声明为变量的数组。我正在使用一个服务，并创建了一个 Subject 可观察对象，以便从一个组件获取数据并注入到另一个组件。当我在订阅该变量后尝试将数据推入数组时，它暂时被更新，但当我打开该组件时，数据并没有被推入。当我在订阅方法内部使用 console log 时，数组会更新，但一旦我打开该组件，它就会被重置。我不知道问题出在哪里。代码如下:

服务.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);
  }

}

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

答案＃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);
  }

引用块