angular - 从组件类中的可观察值中获取唯一/最新值(商店选择器的结果)

Question

我的应用程序正在使用 Angular 和 ngrx 商店。我在商店中使用选择器在我的组件构造函数中获取应用程序状态的用户名属性:

test-component.ts

export class TestComponent {
    username$: Observable<string>;
    constructor(private store: Store<fromRoot.AppState>) {
        this.username$ = this.store.select(fromRegistration.getUsername);
    }

    testMethod() {
         //I need the value of the username observable here as a string
    }

}

这工作正常。我需要在组件模板中打印用户名，这是我使用异步管道完成的:

test-component.html

<div>
{{username | async}}
</div>

这也能正常工作。

现在，我需要从 TestComponent 中的一个方法调用服务，该方法将用户名作为参数发送。我怎样才能做到这一点？我是否需要停止使用异步管道并订阅选择器，然后将用户名属性(然后声明为字符串)分配给可观察对象的值？

注意:用户名 observable 将只有 1 个值，一旦我得到 1 个值我就可以停止观察它。

我了解到，通过使用异步管道，组件会自动取消订阅可观察到的用户名，这是何时发生的，组件如何知道我不再需要观看它了？

如果我不能使用异步管道，我该如何以及何时退订？

Answer 1

我通常选择 Maciej Treder's First thought因为我尽可能地尝试使用dumb组件，但在某些情况下，当我需要选择器的新值来在我的组件中执行额外的东西时，我无论如何都会将它异步传输到我的模板(所以我不需要任何订阅)，我只使用 rxjs tap 运算符，即 pipeable operator do的名称.所以我替换这个:

ngOnInit() {
  this.selected$ = this.store.pipe(select(fromItems.getSelectedBrand));
}

由此:

import { Store, select } from '@ngrx/store';
import { tap } from 'rxjs/operators';

...

ngOnInit() {
  this.selected$ = this.store.pipe(
    select(fromItems.getSelectedBrand),
    tap((brand: Brand) => {
      /**
       * do logic here
       */
    })
  );
}

现在，如果出于某些原因您确实需要订阅它，而不需要像 Maciej Treder's second solution 中那样将其异步传输到任何模板。 ，我建议使用 ngOnDestroy 取消订阅。你会在这里找到更多相关信息:

• How to unsubscribe from ngrx/store?
• When to Unsubscribe in Angular - 内塔内尔·巴萨尔 (Netanel Basal)