Question

如果要加载图片，我要在div上添加动画，并且要在加载图片时删除该类

<div class="card-image placeholder">
    <a [routerLink]="somelink">
    <img src="{{url}}/someimage"
         onError="this.src='image';"
         onload="this.removeClass='placeholder';">
     </a>
</div>

请问您提供解决方案，以在成功加载图片后删除类占位符

Answer 1

您可以在组件类中引入默认值为'true'的布尔属性isPlaceholder

并修改模板，如下所示：

<div class="card-image" [ngClass]="{'placeholder': isPlaceholder}">
    <a [routerLink]="somelink">
    <img src="{{url}}/someimage"
         onError="this.src='image';"
         (load)="isPlaceholder = false">
     </a>
</div>

有关添加动画的信息，请参阅https://angular.io/guide/animations

更新这是codepen https://codepen.io/anon/pen/OeJxaX

上的示例

Answer 2

我找到了删除类占位符的解决方案 onLoad =“ this.parentNode.parentNode.classList.remove（'placeholder'）;”

onload img删除父div的类

2 个答案: