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

それは、これは実際にはかなりngIfとは何かを持つよりも、[data]属性によって引き起こされていることが判明しました。あなたを非難して申し訳ありません。

あなたのフォームが変更されるたびに 'getTypeIconUrl（）'が呼び出されます。私はそこにあるものはありませんが、実行には数ミリ秒かかるようです。単純な '' img'をpng程度使っていれば、ちらつきがないと思います。 –

フォームが変更されても意味をなさないが、タイピングを終えてもちらつきが続けられます。私のポストでGIFを見て、あなたが表示されます！また、 'img'タグを使用することは助けになりません。なぜなら、それはちらちらする外側の' div'です。 –

この投稿を書くと、DOMエレメントobjectを常に更新しようとしている理由が考えられました。ソリューションはかなり明白でした。この問題は、静的なdata属性では発生せず、動的にバインドされた[data]属性のみで発生していたため、オブジェクトの平等性と関連があると思いました。

私のコンポーネントでは、メソッドDomSanitizerを使用して、アイコンのURLを「承認」します。

ただし、次の文は、常に偽です：

bypassSecurityTrustResourceUrl(url) == bypassSecurityTrustResourceUrl(url)

SafeResourceUrlは、この問題が解決されbypassSecurityTrustResourceUrl(url)から返さキャッシュすることにより！

2016-10-15 14:21:26

答えて