[英]How do I push data from a Subject observable to an array in the component?
I am trying to push a message into an array that is already declared as a variable in the component.我正在尝试将消息推送到已在组件中声明为变量的数组中。 I am using a service and have created a subject observable to take data from one component and inject it into another component.
我正在使用一项服务并创建了一个可观察的主题,以从一个组件中获取数据并将其注入另一个组件。 When I try to push the data onto the array after subscribing to the variable, it's updated temporarily but when I open that component, the data is not pushed.
当我在订阅变量后尝试将数据推送到数组中时,它会临时更新,但是当我打开该组件时,不会推送数据。 The array updates when I console log from inside the subscribe method but it's reset once I open that component.
当我从 subscribe 方法内部控制台日志时,数组会更新,但一旦我打开该组件,它就会重置。 I don't know what is the problem.
我不知道是什么问题。 This is the code:
这是代码:
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);
}
}
I can't update the message array.我无法更新消息数组。 How do I do this with minimal changes?
如何以最少的更改做到这一点?
You can create a service to send data from one component to another by using BehaviourSubject您可以使用 BehaviourSubject 创建服务以将数据从一个组件发送到另一个组件
Service:服务:
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) } }
Sender Component:发件人组件:
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); } }
Receiver Component接收器组件
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
块引用
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.