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

Posted 2023-02-22

【中文标题】Angular 4 加载器无法按预期工作

【英文标题】：Angular 4 loader does not work as expected

【发布时间】：2018-01-17 06:37:57

【问题描述】：

我想在页面呈现之前放置加载 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

【参考方案1】：

在您的服务调用中设置一个 loded 变量为真，然后它将起作用

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

【讨论】：

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