Javascript 如何将数据从可观察的对象推送到组件中的数组？

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

服务台 发送器组件

---

我无法更新消息数组。如何在最少更改的情况下完成此操作？

您可以创建一个服务，使用行为主题将数据从一个组件发送到另一个组件

服务：

从'@angular/core'导入{Injectable}；
从'rxjs/BehaviorSubject'导入{BehaviorSubject}；
@注射的({
providedIn:'根'
})
导出类数据服务{
private userDetails=新行为主体（“”）；
currentUserDetails=this.userDetails.asObservable（）；
构造函数（）{}
sendUserDetails（消息）{
this.userDetails.next（消息）
}
}

如何回答您的问题有点不清楚。我怀疑你有一些打字错误（登录组件中的服务是

SerService

和

message$

应该是

sourceMessage$

？如果是这样，您似乎有某种竞争条件。很可能您在登录组件订阅之前调用了

onSubmit

。根据您的需要，从

submit>更改消息ct

to

ReplaySubject

可能会解决您的问题。服务上没有属性

message$

。有属性

sourceMessage$

。

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

}