Question

我想为我的画廊制作一个'lazy-loader'。因此，我希望在未加载图像时显示加载的.gif图像。

我有一个包含文件名，类型等属性的数组，但是有一个后端请求可以返回图像真实访问URL（需要下载并打开图像）这个网址将会为数组的每个元素添加为'sUrl'属性

......和......

然后我有一个带有图像属性的数组，所以array [0] .sUrl将作为attr传递给指令，该指令位于img html元素上：

<img src="lazyloading.gif" ImageLazyLoading="array[0].sUrl">
<img src="lazyloading.gif" ImageLazyLoading="array[1].sUrl">
<img src="lazyloading.gif" ImageLazyLoading="array[2].sUrl">

在指令中，我想做类似的事情：

@Input() src: string;
@Input() ImageLazyLoading: string;

const fakeImg = new Image();
fakeImg.src = this.ImageLazyLoading;
fakeImg.addEventListener('load', () => {
    src = fakeImg.src;
}, false);

但唯一的问题是当这个指令初始化时，array [0] .sUrl属性不存在！原因可能是BE服务没有完成。

我已经尝试了所有的生命周期钩子，它根本没用。只有ngAfterViewChecked（）可能适合我，但如果它是唯一的方法，则不需要指令，我可以在组件中执行。

[service]
   |
[parent] -> [child]

parent: where the BE request is (that fn is in a service)
child: where the img and directive are

使用指令有什么方法可以解决这个问题吗？

如何在Angular 2 +中为指令提供BE响应？

0 个答案: