*ngIf 观察可观察到的变化并重新创建/重新渲染子级的问题答案

【问题标题】：Problem with *ngIf watching for observable changes and re-create/re-render child*ngIf 观察可观察到的变化并重新创建/重新渲染子级的问题
【发布时间】：2020-03-30 02:33:51
【问题描述】：

我有一个组件正在监视可观察的返回对象的变化以进行完整的子重新渲染

所以我有类似下面的东西

<ng-container *ngIf="someobject | async">
     <child [someobject]="someobject">
</ng-container>

我没有问题将值更改渲染到子级，但是*ngIf 只有在值从 true 切换到 false 时才重新渲染子级，有没有办法在某些对象值更改时强制重新渲染。因为我试图避免 ngOnChanges 对于使用 onPush 更改检测的愚蠢组件的逻辑

更新——

我正在寻找一个完全重新渲染/重新创建，即 destory->create child here on 输入变化

stackbliz 演示 stackblitz.com/edit/angular-tfxc6f

【问题讨论】：

为什么需要重新渲染整个组件？将 ngIf 与异步管道一起使用与普通管道相同，但具有可观察值，仅当对象为 false、未定义、null 等时才会为 false。
如果某个对象从一个真实值更改为另一个真实值并且这不是我想要的，它不会重新渲染
我知道，我只是问你为什么需要重新渲染完整的组件，并告诉你这是不可能的，因为通常当你需要重新渲染完整的对象时糟糕的设计问题。
更新了我的问题以澄清
无论如何我不明白为什么你需要销毁一个重新创建组件，你有一个可观察的作为输入参数，虽然你使用onPush，但它会更新，这就是这样做的方法，可观察的。

标签： angular rxjs

【解决方案1】：

我认为使用默认的 *ngIf 指令是不可能的，因为如果您在 *ngIf 指令实现中看到它会在定义 viewRef 后缓存它，这就是您无法重新渲染您的模板。请在角度回购中参考这个line。

解决方案：您可以创建自己的结构指令，您不希望缓存 viewRef 并始终或在您可能喜欢的任何条件下重新渲染。 Working Stackblitz供您参考。

谢谢

【讨论】：

我认为自定义指令是要走的路

【解决方案2】：

应该可以破解*ngFor，而不是*ngIf：

this.someObjectAsArray = this.someobject.pipe(map(x => [x]));

someTrackingFn = // put something appropriate here

<ng-container *ngFor="let obj of (someObjectAsArray | async); trackBy: someTrackingFn">
     <child [someobject]="obj">
</ng-container>

【讨论】：

【解决方案3】：

您的子组件输入绑定似乎缺少异步管道，或者您是否有一个可观察的作为输入绑定？

<ng-container *ngIf="someobject | async">
  <child [someobject]="someobject | async"></child>
</ng-container>

否则，您可以在 observable 前面加上传统的$ 符号，然后执行*ngIf="someobject$ | async as someobject" 之类的操作。然后你可以在没有异步管道的情况下传递你的对象。

【讨论】：