Задержка компонента html угловая 2

Question

Я хотел бы сделать такую ​​вещь. Когда компонент загружается, то через 1 секунду, чтобы загрузить его html. Это компонент кода (ts).

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'pagination', 
    templateUrl: './app/html/pagination.component.html', 
    styleUrls: ['app/css/pagination.component.css'] 
}) 

export class Pagination {} 

Мы видим в коде templateUrl: './app/html/pagination.component.html', Как загрузить через 1 секунд? В общем, моя идея состоит в том, чтобы показать загрузку с задержкой (1 с) для пользователей, в то время как запрос на выполнение на сервере. У кого-нибудь есть идеи?

Answer 1

Попробуйте использовать директиву ngIf.

Так это будет выглядеть примерно так:

<div *ngIf="showContent">Will appear after ~1 sec</div> 

в код компонента:

export class Pagination { 
    public showContent: boolean = false; 
    public ngOnInit() { 
     setTimeout(()=>this.showContent=true, 1000); 
    } 

} 

Answer 2

В основном то, что вы хотите, чтобы показать компонент только после того, как запрос закончен, чтобы достичь этого просто подписаться на ваш запрос и установить флаг, чтобы показать компонент в шаблоне:

<div *ngIf="loaded"> 
... 
... 
... 
</div> 

В классе компоненты:

@Component.... 
export class FooComponent{ 
    let loaded = false; 
} 

А по вашему запросу:

this.http.post(.....).subscribe(() => { 
    this.loaded = true; 
}); 

больше информации о angular.io