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

Question

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

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

区块报价