如何从Service实时更新组件数据？当前密码强度实现方案是否最优？

当前的实现方案不是最优，核心问题在于无法实现密码强度的实时更新，以下是具体问题和改进方案：

现有实现的核心问题 #

• Indicator组件仅在初始化时获取一次密码强度，后续密码变化时不会自动更新状态，完全达不到"实时更新"的需求
• CurrentPasswordStrengthService的currentPasswordStrength()是同步方法，无法感知密码的动态变化
• CurrentPasswordService采用普通变量存储密码，没有响应式机制，无法让依赖它的组件/服务监听密码变更

优化方案 #

1. 改造CurrentPasswordService为响应式存储 #

使用BehaviorSubject存储密码，让外部可以订阅密码的变化：

import {Injectable} from '@angular/core';
import {BehaviorSubject} from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CurrentPasswordService {
  // 初始化空字符串作为默认密码
  private passwordSubject = new BehaviorSubject<string>('');
  // 暴露只读的可观察对象，外部只能订阅不能直接修改
  public password$ = this.passwordSubject.asObservable();

  setPassword(password: string): void {
    this.passwordSubject.next(password);
  }

  getPassword(): string {
    return this.passwordSubject.value;
  }
}

2. 改造CurrentPasswordStrengthService，提供响应式的密码强度流 #

让服务直接输出密码强度的可观察流，自动监听密码变化并实时计算强度：

import {Injectable} from '@angular/core';
import {PasswordStrength} from "../infrastructure/enums/password-strength.enum";
import {PasswordStrengthService} from "./password-strength.service";
import {CurrentPasswordService} from "./current-password.service";
import {map} from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CurrentPasswordStrengthService {
  // 直接暴露密码强度的可观察流，自动跟随密码变化更新
  public passwordStrength$ = this.currentPasswordService.password$.pipe(
    map(password => this.passwordStrengthService.passwordStrength(password))
  );

  constructor(
    private passwordStrengthService: PasswordStrengthService, 
    private currentPasswordService: CurrentPasswordService
  ) {}
}

3. 改造Indicator组件，实现实时更新 #

去掉无用的ngOnChanges逻辑，通过订阅可观察流实时更新状态：

import {Component, OnInit, OnDestroy} from '@angular/core';
import {CurrentPasswordStrengthService} from "../services/current-password-strength.service";
import {Subscription} from 'rxjs';
import {PasswordStrength} from "../infrastructure/enums/password-strength.enum";

@Component({
  selector: 'app-indicator',
  templateUrl: './indicator.component.html',
  styleUrls: './indicator.component.scss'
})
export class IndicatorComponent implements OnInit, OnDestroy {
  state: PasswordStrength | undefined;
  private subscription!: Subscription;

  constructor(private currentPasswordStrengthService: CurrentPasswordStrengthService) {}

  ngOnInit(): void {
    // 订阅密码强度变化，实时更新组件状态
    this.subscription = this.currentPasswordStrengthService.passwordStrength$.subscribe(strength => {
      this.state = strength;
    });
  }

  ngOnDestroy(): void {
    // 组件销毁时取消订阅，避免内存泄漏
    this.subscription.unsubscribe();
  }
}

4. 简化PasswordFormComponent（可选） #

当前表单组件逻辑没问题，可移除不必要的局部服务实例化（如果PasswordStrengthService是全局提供的）：

import {Component, OnInit} from "@angular/core";
import {FormControl} from "@angular/forms";
import {CurrentPasswordService} from "../services/current-password.service";

@Component({
  selector: 'app-password-form',
  templateUrl: './password-form.component.html',
  styleUrls: './password-form.component.scss',
  // 若PasswordStrengthService已全局注册，删除此处的providers，避免重复创建实例
  // providers: [PasswordStrengthService]
})
export class PasswordFormComponent implements OnInit{
  passwordControl = new FormControl();

  constructor(private currentPasswordService: CurrentPasswordService) {}

  ngOnInit(): void {
    this.passwordControl.valueChanges.subscribe(password => {
      this.currentPasswordService.setPassword(password || '');
    });
  }
}

内容的提问来源于stack exchange，提问作者Dimon Agon