Question

是否可以在经过设定的时间后使用指令延迟加载元素？

以下是我打算完成的事情：

在footer-container.html

中

<template [ngIf]="flag">
    <footer></footer>
<template>

在footer-container.ts

中

flag = false;

setTimeout(() => {
    this.flag = true;
    this.changeDetector.markForCheck();
}, 1000);

指令将按如下方式使用：

在footer-container.html

中

<footer [defer]="1000"></footer>

Answer 1

您需要创建一个结构指令，如ngFor和ngIf。请参阅此处的文档：https://angular.io/docs/ts/latest/guide/structural-directives.html

你可以这样使用它：

var id = 1;

$("#addNew").click(function(e) {
  e.preventDefault();
  $("body").append( '<div id="image-preview-'+id+'" class="image-preview"><label id="image-label-'+id+'" for="image-upload-'+id+'" class="image-label">Choose file</label><input type="file" id="image-upload-'+id+'" name="thumbnail[]" accept="image/*" class="image-upload" /></div>' );

  $.uploadPreview({
    input_field: "#image-upload-" + id,
    preview_box: "#image-preview-" + id,
    label_field: "#image-label-" + id
    });
});

这里是plnkr：https://plnkr.co/edit/mqU597fm3cdl21VYqcX5?p=preview

  <my-dir *delay="let delay from delay"></my-dir>

使用指令延迟组件渲染

1 个答案: