지시문을 사용하여 구성 요소 렌더링 지연

Question

지시문을 사용하여 설정된 시간이 경과 한 후에 요소를 지연로드 할 수 있습니까?

다음

내가 달성하고자하는 것입니다 : 바닥 글 - container.html에서

바닥 글 - container.ts에서

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

다음과 같은 지침이 소비 될 것

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이

당신은 그런 식으로 사용할 수 있습니다 : 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() { 
    } 
}