带有ngIf闪烁的Angular2项目

Question

背景

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

问题

cc符号闪烁，如下图所示。 Chrome DOM检查器中的一个外观向我展示了应用了*ngIf的元素正在发生的事情，元素正在以某种方式更新（没有任何属性更改），这似乎会导致闪烁。

代码

以下是包含闪烁部分的模板部分的代码。我已检查过该组件，ngIf中使用的变量未更新，除非它假设（当信用卡号更改为不同类型的信用卡号时）。< / p>

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

可能导致此问题的原因，我将如何解决？

更新

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

Answer 1

写完这篇文章后，我想到了为什么它会一直尝试更新DOM元素object。事实证明解决方案非常明显。由于静态data - 属性没有出现问题，但只有动态绑定[data] - 属性，我猜测它与对象相等有关。

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

但是，以下声明始终为false：

bypassSecurityTrustResourceUrl(url) == bypassSecurityTrustResourceUrl(url)

通过缓存从SafeResourceUrl返回的bypassSecurityTrustResourceUrl(url)来解决此问题！