如何在 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.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>

Answer 2

把form.component.html的html改成：

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

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