如何在不使用async pipe的情况下，随Ngrx状态变化更新模板？

核心说明 #

你提到的在ngOnInit里订阅Ngrx状态的方式完全可行，这里要纠正一个误解：ngOnInit确实只在组件初始化时执行一次，但其中的store.select().subscribe()会持续监听状态变化——只要selectDeletePhoneNumberError对应的Ngrx状态发生更新，回调函数就会触发，和组件是否重新渲染无关。

具体实现步骤 #

1. 在组件类中定义用于绑定模板的属性：

deleteError: any; // 根据实际业务定义具体类型，比如string、Error等

2. 在ngOnInit中订阅状态，同时添加自定义逻辑并更新组件属性：

import { Store } from '@ngrx/store';
import { selectDeletePhoneNumberError } from './your-selectors-path';

// ...

constructor(private store: Store) {}

ngOnInit() {
  this.store.select(selectDeletePhoneNumberError).subscribe((data) => {
    if (data) {
      // 这里添加你需要的自定义逻辑
      console.log('删除手机号操作出错:', data);
      // 更新组件属性，Angular会自动检测到变化并刷新模板
      this.deleteError = data;
    } else {
      // 状态重置时的处理逻辑
      this.deleteError = null;
    }
  });
}

3. 在HTML模板中直接绑定该属性：

<div *ngIf="deleteError" class="error-alert">
  错误提示：{{ deleteError }}
</div>

重要注意：清理订阅避免内存泄漏 #

组件销毁时如果不取消订阅，会导致内存泄漏，推荐两种处理方式：

• 使用Subscription管理单个订阅：

import { Subscription } from 'rxjs';

// ...

private deleteErrorSub!: Subscription;

ngOnInit() {
  this.deleteErrorSub = this.store.select(selectDeletePhoneNumberError).subscribe((data) => {
    // ... 你的逻辑代码
  });
}

ngOnDestroy() {
  // 组件销毁时取消订阅
  this.deleteErrorSub?.unsubscribe();
}

• 使用takeUntil操作符（适合多订阅场景）：

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

// ...

private destroy$ = new Subject<void>();

ngOnInit() {
  this.store.select(selectDeletePhoneNumberError)
    .pipe(takeUntil(this.destroy$))
    .subscribe((data) => {
      // ... 你的逻辑代码
    });
}

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

特殊场景：手动触发变更检测 #

如果你的状态更新操作不在Angular默认的变更检测周期内（比如在外部异步回调中更新状态），可以注入ChangeDetectorRef手动触发检测：

import { ChangeDetectorRef } from '@angular/core';

// ...

constructor(private store: Store, private cdr: ChangeDetectorRef) {}

ngOnInit() {
  this.store.select(selectDeletePhoneNumberError).subscribe((data) => {
    if (data) {
      this.deleteError = data;
      // 手动触发变更检测
      this.cdr.detectChanges();
    }
  });
}

内容的提问来源于stack exchange，提问作者sravan ganji