延遲組件的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