延迟组件的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