角4のローダーが期待どおりに動作しない

ページがレンダリングされる前にローディングgifを配置します。そのために、そのコンポーネントにロードされた変数を宣言します.HTMLリクエストが完了するとすぐにコンポーネントを非表示にします（ロードされた属性をtrueに設定します）。これ以降は、GIFの読み込みがなくなり、コンポーネントが表示されます。最初にGIFをロードしてからコンポーネントをロードすることを期待しています。しかし、問題は、同時にロードする（非表示にする）とコンポーネント（非表示にする）です。私は問題をチェックするために低インターネット速度を使用し、ローディングはコンポーネントがレンダリングされた後にのみ表示されることに気付きました。この厄介な問題を解決するのを手伝ってください。角4のローダーが期待どおりに動作しない

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

出典

2017-08-09 Vugar Abdullayev