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>

什么可能导致这个问题,我将如何解决它？

UPDATE

事实证明,这实际上是由[data]属性引起的,而不是与ngIf有关.对不起责备你,ngIf.

最佳答案:

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

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

但是,以下语句始终为false：

bypassSecurityTrustResourceUrl(url) == bypassSecurityTrustResourceUrl(url)

通过缓存从bypassSecurityTrustResourceUrl(url)返回的SafeResourceUrl,此问题已得到解决！