BehaviorSubject 没有按预期工作 Angular

问题描述

我正在尝试将电子邮件从帐户恢复组件传递到带有 BehaviorSubject 的密码重置组件，但我没有在密码重置组件中收到电子邮件，而是获得了初始值。我在服务中收到了新电子邮件。

accountrecovery.component

import { Component,OnInit } from '@angular/core';
import { MyseatDataService } from '../../storitve/myseat-data.service';
import { SendemailbetweencompService } from '../../storitve/sendemailbetweencomp.service';
@Component({...})
export class AccountRecoveryComponent implements OnInit {
  constructor(private myseatdata: MyseatDataService,private givemailtopasscomp:SendemailbetweencompService) { }

  public resetEmailData = {email: ""}
  public sendEmailData(): void {
    this.givemailtopasscomp.sendMail(this.resetEmailData.email);
    //... do backend
  }
}

sendemailbetweencomp.service

import { Injectable } from '@angular/core'
import { BehaviorSubject } from 'rxjs'
@Injectable({providedIn: 'root'})
export class SendemailbetweencompService {
    private emailsource = new BehaviorSubject<string>('[e-mail]');
    emailsource$ = this.emailsource.asObservable();

    constructor(){ }
    sendMail(email: string){
        this.emailsource.next(email); //console.log(this.emailsource.getValue()); value arrives here
    }
}

密码重置组件

import { Component,OnInit } from '@angular/core';
import { MyseatDataService} from '../../storitve/myseat-data.service';
import { SendemailbetweencompService } from '../../storitve/sendemailbetweencomp.service';
@Component({...})
export class PasswordResetComponent implements OnInit {
  constructor(private myseatdata: MyseatDataService,private givemailtopasscomp: SendemailbetweencompService) { }

  public resetPassword(): void {
    this.givemailtopasscomp.emailsource$.subscribe( email => {
      console.log(email); // returns [e-mail] instead of a new value
    });
    // do backend
  }
  ngOnInit(): void {
    this.givemailtopasscomp.emailsource$.subscribe( email => {
      console.log(email); // returns [e-mail] instead of a new value
    });
  }
}

解决方法

此处quick example介绍了如何使用服务将数据传递给另一个组件。

首先创建一个包含 Subject（这里是您的 BehaviorSubject）的服务。 然后在您的发射器组件中，注入此服务并通过 .next() 方法在主题中传递密码。 在目标组件中，注入服务并将您的密码属性绑定到主题。