Angular 4加载程序无法正常工作

我想在页面呈现之前加载gif。为此，我在该组件中声明加载的变量。然后，在http请求完成后（尽快将加载的属性设置为true）隐藏组件。此后加载gif消失和组件显示。我期望第一个加载gif出现，然后是组件。但问题在于，同时加载（隐藏）和组件（隐藏）。我使用低网络速度检查问题，并意识到只有在组件渲染后加载显示。请帮助解决这个尴尬的问题。Angular 4加载程序无法正常工作

HTML文件：

<loaders-css [loader]="'square-spin'" [loaderClass]="'my-loader'" 
*ngIf="!loaded"></loaders-css> 

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

将输出文件

@Component({ 
    selector: 'app-user-info', 
    templateUrl: './user-info.component.html', 
    styleUrls: ['./user-info.component.scss'], 
    encapsulation: ViewEncapsulation.None 
    }) 
    export class UserInfoComponent implements OnInit { 
    user: any; 
    baseUrl= globalVars.baseUrl; 
    token: any; 
    apps: any; 
    news: any; 
    loaded = false; 
    constructor(private authService: AuthService , private dashboardService: 
DashboardService) { } 
ngOnInit() { 
this.user = JSON.parse(localStorage.getItem('currentUser')).userProfile; 
this.authService.getToken().then((token) => {this.token = token}); 
this.dashboardService.getApplications().then(apps => { 
    this.apps = apps.data; 
}); 
this.dashboardService.getNews().then(news => { 
    this.news = news.data; 
}); 
this.loaded = true; 
      } 
}

enter image description here

来源

2017-08-09 Vugar Abdullayev

做出loded变量真正进入你r服务电话那么它会工作

this.dashboardService.getNews().then(news => { 
    this.news = news.data; 
    this.loaded = true; 
});

来源

2017-08-09 11:56:51

嗨阿伦。感谢您的回复。但它仍然无法正常工作。问题是加载gif和组件是同时加载的！请看这里的gif。你可以看视频描述情况下面https://gifyu.com/image/zheH –

Angular 4加载程序无法正常工作

回答

相关问题