Question

我创建了一个属性指令ImageSpinloaderDirective来有条件地更改用户个人资料图片的外观，具体取决于是否有图片以及是否已加载：

如果无法解析src属性的URL（404等），则为默认值图像应该显示
如果图片仍在加载，则应显示加载动画
如果用户已更改，则会加载新的个人资料图片，并且再次显示重新加载器，直到加载完成为止

我的方法是收听load中的DOM事件error和ImageSpinloaderDirective，并设置src属性和img-loading类因此<img>元素。 img-loading类将图像opacitiy设置为0并使用动画gif作为背景图像。

现在我想在每次显示不同的用户时从父组件（isLoading）更改指令的UserDetailsComponent字段。我认为在该组件中使用@ViewChild注释将是实现这一目标的正确选择。然而，绑定似乎由于某种原因而失败，因为UserDetailsComponent的{{1}}始终未定义。

是否可以使用带有imageSpinloaderDirective注释的属性指令？有没有更好的/替代方法将属性指令绑定到组件？或者这种方法是完全错误的，应该以不同的方式实施吗？

用户-details.component.ts

@ViewChild

用户-details.html

Component({
    moduleId: module.id,
    selector: 'user-details',
    templateUrl: 'user-details.html',
    styleUrls: [
        './../grid/grid-item-details.css',
        './../grid/grid.css'
    ],
    animations: [fadeInOut]
})
export class UserDetailsComponent extends GridItemDetailsComponent<User>
{
    public user: User;
    public profileImageUrl: string;

    @ViewChild(ImageSpinloaderDirective)
    public imageSpinloaderDirective: ImageSpinloaderDirective;

    public loadDetails(item: User): void
    {
        this.user = item;
        this.imageSpinloaderDirective.isLoading = true;
        this.profileImageUrl = `${this.configService.config.profileApiUrl}/image/${item.id}`;
    }
}

图片-spinloader.directive.ts

<div class="row">
  <div class="col-lg-12">
    <div class="img-loader">
      <img id="foo" imgspinloader
           class="img-rounded"
           src="{{profileImageUrl}}">
    </div>
  </div>
</div>

绑定属性指令到组件@ViewChild undefined

0 个答案: