如何在 Angular 5 中的页面加载时显示微调器（或其他任何东西）？

Question

我试图在页面加载时显示图像（一般的想法是显示微调器）但它没有显示：

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-form',
    templateUrl: './form.component.html'
})
export class FormComponent implements OnInit {

    loading = true;

    constructor() { }

    ngOnInit() {
        this.loading = true;
    }

}

在html中：

<app-form>
    <img *ngIf="loading" src="/assets/img/logo.png" />
</app-form>

form.component 模板位于 <app> 模块中。

Answer 1

将form.component.html的html改为：

<img *ngIf="loading" src="/assets/img/logo.png" />

不需要<app-form></app-form>，放在父组件的html

Answer 2

我在目前正在进行的许多项目中都这样做。最好的办法是。

在你的form.component.ts

里面

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-form',
    templateUrl: './form.component.html'
})
export class FormComponent implements OnInit {

    loading = true;
    loaded = false;

    constructor() { }

    async ngOnInit() {
        try {
            await this.getData(); // DataCall
        } catch (err) {
            console.log('Error', err);
        }
        this.loaded = true;
        this.loading = false;
    }

}

然后在你的 form.component.html

<img *ngIf="!loading" src="/assets/img/logo.png" />
<ng-container *ngIf="loaded">
    ...
    // Page Content
    ...
</ng-container>

如何在 Angular 5 中的页面加载时显示微调器（或其他任何东西）？

How to show spinner (or anything else) on page load in Angular 5?

onload

spinner

angular

angular5