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

中

如何在Angular 5的页面加载中显示微调器（或其他功能）？

2 个答案: