使用指令延迟组件渲染

Question

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

以下是我打算完成的：

在页脚中-container.html

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

在页脚中-container.ts

flag = false;

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

指令将按如下方式使用：

在页脚中-container.html

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

Answer 1

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

你可以这样使用它：

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

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

@Component({
  selector: 'my-dir',
  template: 'hi there'
})
export class MyDir {

}

@Directive({
  selector: '[delayFrom]'
})
export class Delay implements AfterViewInit {
  @Input() delayFrom: number;

  constructor(private tpl: TemplateRef<any>, private vc: ViewContainerRef) {
  }

  ngAfterViewInit() {        
    setTimeout(() => {
      this.vc.createEmbeddedView(this.tpl);
    }, this.delayFrom);
  }
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <my-dir *delay="let delay from delay"></my-dir>
    </div>
  `,
})
export class App {
  name: string;
  delay = 5000;

  constructor() {
  }
}

使用指令延迟组件渲染

Defer component rendering using directive

lazy-loading

angular