如何在 Angular 中清空组件属性，同时保留其类型定义？答案

【问题标题】：How to empty a component property in Angular while preserving its type definition?如何在 Angular 中清空组件属性，同时保留其类型定义？
【发布时间】：2019-01-09 12:28:55
【问题描述】：

假设一个组件具有以下属性：

private foo$: Observable<Array<SomeType>>;
private bar: SomeOtherType;

后来他们得到了价值......

this.foo$ = someSubject.pipe(switchMap(...whatever...
this.bar = new SomeOtherType(...whatever...

在某些时候，无论出于何种原因，我都想清空这两个属性，清空是指删除它们的值，所以将它们设置回它们获得值之前的状态。

让他们undefined 不是一个选项。如果我这样做，他们会丢失他们的“类型信息”。我希望 TypeScript 和 Angular 知道它们仍在处理 Observable 和 SomeOtherType 的对象。

我有什么选择？

【问题讨论】：

如果不是undefined，“他们获得价值之前的状态”是什么？
@ConnorsFan 这也是让我感到困惑的地方。因为一旦我设置了 foo$ undefined Angular 就不再将其视为一个 Observable 并且即使新值再次被推送到它的流中，它的订阅也将不再起作用。
看看this stackblitz。 obs 变量在 5 秒后设置为 undefined，并且 Observable 继续工作。
Angular 有 a tutorial 这与此处相关。它有一个live example。在 hero-search.component.ts 中查找方法 search(term: string)。在其正文中添加以下代码：if(term == 'undef') this.heroes$ = undefined;。在搜索框中输入“undef”。之后搜索功能停止工作。
视图使用这个循环来显示结果：<li *ngFor="let hero of heroes$ | async" >。 Observable 可能会停止，因为当heroes$ 为undefined 时，async 管道没有任何可订阅的 Observable。当组件被销毁时，async 管道 unsubscribes automatically，也可能在 observable 变量变为 undefined 时。

标签： angular typescript variables types undefined

【解决方案1】：

我怀疑您可以将类型设置为任何而不是未定义。

例如，私人 foo$: Observable>; 私人酒吧：SomeOtherType;

【讨论】：

【解决方案2】：

为了“将变量设置回它们获得值之前的状态”，将它们设置为undefined：

this.foo$ = undefined;
this.bar = undefined;

在您用于测试的the stackblitz 中，可观察的heroes$ 与async 管道一起使用：

<li *ngFor="let hero of heroes$ | async" >

如果 heroes$ 被设置为 undefined，列表将从视图中消失，并且 Observable 停止工作。组件销毁时的async管道unsubscribes automatically；当 Observable 变量变为 undefined 时，它似乎也是如此。

除了 Observable 与 async 管道一起使用的情况外，将变量设置为 undefined 不会停止 Observable 的工作，如 this stackblitz 所示。

【讨论】：

我想我已经找到了 observable 停止工作的原因，我认为这不是异步管道，而是 HeroSearchComponent 的 ngOnInit() 内的代码。设置 observable undefined 会破坏它与主题之间的关联。但是如果你再次调用那段代码，它就会再次开始工作。我认为这是我们忽略的。你怎么看？ ...无论如何，这一切都不再那么重要了。我最初对undefined 的疑问已消除。
ngOnInit 中的代码与我们一开始讨论的变量赋值相同。 This modified stackblitz 显示没有 async 管道会发生什么。订阅是在ngOnInit 中手动完成的。您可以在控制台和视图输出中看到，在将 heroes$ 设置为 undefined（通过在输入字段中输入 undef）之后，Observable 继续工作。