ディレクティブを使用してコンポーネントレンダリングを延期する

Question

ディレクティブを使用して、一定の時間が経過した後にエレメントを遅延ロードすることは可能ですか？

次は私が達成しようとするものです。

フッター-container.html

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

でフッター-container.tsで

flag = false; 

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

次のように指令が消費することになります。

In footer-container.html

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

Answer 1

ngForやngIfのような構造指示を作成する必要があります。ここではドキュメントを参照してください：https://angular.io/docs/ts/latest/guide/structural-directives.html

あなたはそのようにそれを使用することができます：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() { 
    } 
}