javascript - 带有 ngIf 闪烁的 Angular2 项目

背景

我正在创建一个信用卡表单组件。该组件检查输入的信用卡类型，并显示该卡类型的符号/图标。该符号是一个外部 SVG，会在识别出信用卡类型后立即加载。

问题

cc 符号闪烁，如下图所示。在 Chrome DOM 检查器中，我看到应用了 *ngIf 的元素正在发生某些事情，该元素正在以某种方式更新(没有任何属性更改)，这似乎导致闪烁.

代码

下面是我的模板中包含闪烁部分的代码。我已经检查了组件，ngIf 中使用的变量没有更新，除非它应该更新(当信用卡号更改为不同类型时)。

<div class="credit-card-icon" *ngIf="creditCardType != null">
    <object type="image/svg+xml" [data]="getTypeIconUrl()"></object>
</div>

是什么导致了这个问题，我该如何解决？

更新

事实证明，这实际上是由 [data] 属性引起的，而不是与 ngIf 有任何关系。抱歉责怪你，ngIf。

最佳答案

写完这篇文章后，我开始思考为什么它会一直尝试更新 DOM 元素 object。事实证明，解决方案非常明显。由于问题没有发生在静态 data 属性上，而只出现在动态绑定(bind)的 [data] 属性上，我猜它与对象相等性有关.

在我的组件中，我使用 DomSanitizer 的 bypassSecurityTrustResourceUrl(url) 方法来“批准”图标的 url。

然而，下面的陈述总是错误的:

bypassSecurityTrustResourceUrl(url) == bypassSecurityTrustResourceUrl(url)

通过缓存从 bypassSecurityTrustResourceUrl(url) 返回的 SafeResourceUrl，此问题已解决!

关于javascript - 带有 ngIf 闪烁的 Angular2 项目，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40059829/