无法从 Angular 中的另一个组件获取最新发出的值？

Question

大家好，我正在尝试从 app-bene-verification.ts 组件中的组件 app-confirm-bottom-sheet 获取变量的最新更新值，但无法获取。
下面是我的组件代码app-confirm-bottom-sheet.ts

import { FormControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ChangeDetectorRef, Component, Inject, OnInit } from '@angular/core';
import { MatBottomSheet, MAT_BOTTOM_SHEET_DATA } from '@angular/material/bottom-sheet';
import { UtilityService } from '../../services/utility.service';

@Component({
  selector: 'app-confirm-bottom-sheet',
  templateUrl: './confirm-bottom-sheet.component.html',
  styleUrls: ['./confirm-bottom-sheet.component.scss']
})
export class ConfirmBottomSheetComponent implements OnInit {

  sheetData: any;
  confirmForm!: FormGroup;
  npciUserName:any=''

  constructor(
    private bottomSheet: MatBottomSheet,
    @Inject(MAT_BOTTOM_SHEET_DATA) public data: any = {},
    private fb: FormBuilder,
    private changeDetector: ChangeDetectorRef,
    private utilityService: UtilityService
  ) {

  }
  ngOnInit(): void {

  }
  updateUserName(): void {
    this.utilityService.updateNpciUserName(this.npciUserName);
  }
  checkNpci() {
    console.log(this.npciUserName);
  }

下面是 app-confirm-bottom-sheet.html

的 HTML

      <input type="text" [(ngModel)]="npciUserName" placeholder="Enter your name" (keyup)="updateUserName()" >
   

以下是app-bene-verification.ts

的代码

import { Component, OnInit, ViewChild } from '@angular/core';
import { FormControl, FormGroup, Validators, FormBuilder } from '@angular/forms';
import { MatPaginator, PageEvent } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { DatePipe } from '@angular/common';
import { MatBottomSheet } from '@angular/material/bottom-sheet';
import { ConfirmBottomSheetComponent } from './../../../../common/dialogs/confirm-bottom-sheet/confirm-bottom-sheet.component';
import { BankValidationService } from '../../services/bank-validation.service';
import { UtilityService } from './../../../../common/services/utility.service';
import { ExportService } from './../../../../common/services/export.service';
import { Subscription } from 'rxjs';

export interface BeneData {
  agent_ref_id: string
  agent_mobile_no: string
  account_holder_name: string
  account_number: string
  ifsc_code: string
  bank_name: string
  account_validation_status_refid: string
  bank_id: number
  retailer_name: string
}

@Component({
  selector: 'app-bene-verification',
  templateUrl: './bene-verification.component.html',
  styleUrls: ['./bene-verification.component.scss']
})
export class BeneVerificationComponent implements OnInit {

  npciUserName: any = '';
  npciUserNameSubscription!: Subscription;
  constructor(private bankValidationService: BankValidationService,
    private datePipe: DatePipe,
    private bottomSheet: MatBottomSheet,
    public utilityService: UtilityService,
    private exportService: ExportService,
    private fb: FormBuilder
  ) {
    this.range = new FormGroup({
      fromDate: new FormControl(),
      toDate: new FormControl()
    });
    this.npciUserName = 'Default Value';
  }

  queryParams: any;
  nbtFormGroup!: FormGroup;

  ngOnInit(): void {
    this.npciUserNameSubscription = this.utilityService.npciUserName$.subscribe({
      next: (value: any) => {
        if (this.npciUserName === '' || this.npciUserName === null) {
          this.npciUserName = value;
        }
      },
      error: (error: any) => {
        console.error('Error fetching npciUserName:', error);
        this.npciUserName = 'Default Value'; // or handle the error in another way
      }
    });

   
    this.queryParams = JSON.parse(sessionStorage.getItem('queryParams') as any);
    this.fromDate.setValue(new Date());
    this.toDate.setValue(new Date());
    this.getBeneDetails(this.fromDate.value, this.toDate.value);
    this.getReasonsList()
  }
}

npciUserName 始终设置为默认值。 app-confirm-bottom-sheet.html 中的 npciUserName 的最新值未反映在 app-bene-verification.ts

中

下面是utility-service.ts

的代码

import { Injectable } from '@angular/core';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UtilityService {

  constructor(private _snackBar: MatSnackBar) { }
  private npciUserNameSubject = new BehaviorSubject<any>(null);
  npciUserName$ = this.npciUserNameSubject.asObservable();

  updateNpciUserName(value: any) {
    this.npciUserNameSubject.next(value);
  }

那么如何从 bene-verification.ts 中的 inform-bottom-sheet 获取 npciUserName 的最新发出值？

Answer 1

您需要更改下一个块的

if

条件！目前，只有当该值等于

''

或

null

时，您才会更新该值，这是错误的，如果它不是

''

或

null

之外的任何内容，新代码都会更新它！

...
if (this.npciUserName !== '' && this.npciUserName !== null) { // <- changed here!
      this.npciUserName = value;
}
...