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

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 变量为真，然后它将起作用

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