Question

我想在呈现页面之前放置加载gif。为此，我在该组件中声明了加载的变量。然后在http请求完成后立即隐藏我的组件（最后将加载的属性设置为true）。此后加载gif消失，组件显示。我希望首先加载gif然后出现组件。但问题是同时加载（变为隐藏）和组件（变为隐藏）。我使用低网速检查问题，并意识到只有在渲染组件后才会显示加载。请帮助解决这个棘手的问题。

html文件：

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

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

TypeScript文件

   @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

Answer 1

在服务调用中使一个loded变量为true然后它将起作用

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

Angular 4加载器无法按预期工作

1 个答案: