javascript - 如何将数据从可观察的主题推送到组件中的数组？

Question

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

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

}

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

Answer 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);
  }

Blockquote