Question

我有4个按钮，如选项卡，当我单击第一个按钮时，我必须渲染第一个组件，如果单击第二个按钮，则要渲染第二个组件。

现在我的问题是，当我切换/单击一个按钮到另一个组件时，花费太多时间来呈现 DOM ，因此我想显示 “正在加载...。。” 。

Answer 1

如果每个组件都有自己的路由，则可以订阅路由器。

在app.component.ts

中

import { Router, Event as RouterEvent, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';

constructor(private router: Router) {
        this.router.events.subscribe((event: RouterEvent) => {
            this.navigationInterceptor(event)
        });
}

navigationInterceptor(event: RouterEvent): void {
        if (event instanceof NavigationStart) {
            this.loading = true
        }
        if (event instanceof NavigationEnd) {
            this.loading = false
        }

        // Set loading state to false in both of the below events to hide the spinner in case a request fails
        if (event instanceof NavigationCancel) {
            this.loading = false
        }
        if (event instanceof NavigationError) {
            this.loading = false
        }
    }

在app.component.html

中

<router-outlet></router-outlet>
<spinner-component [spinnerShow]="loading_data"></spinner-component>

Spinner.component.ts

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

@Component({
    selector: 'spinner-component',
  templateUrl: './spinner.component.html',
 styleUrls: ["./spinner.component.scss"]
})

export class SpinnerComponent {
    @Input() spinnerShow: boolean;
}

Spinner.component.html

<div *ngIf="spinnerShow" class="sc-background"></div>
<div *ngIf="spinnerShow" [ngClass]="{'sc-default-spinner' : ref.children.length == 0 }"  class="logo sc-center">
<div #ref><ng-content></ng-content></div></div>

Spinner.component.scss

.sc-background{
 content : "";
 z-index: 1004;
 position: absolute;
 top:-10%;
 right:0;
 left:0;
 bottom: 0;
 background-color: rgba(255,255,255,0.8);
}
.logo {
    background: url("./../../../../assets/images/sprite/template.png") 0px 0px;
    width:30px;
}
.sc-center{
top: 50vh;
margin: auto;
position: fixed;
left: 0;
right: 0;
z-index: 1005;

}

Answer 2

如果您只想显示 正在加载... ，则将index.html修改如下：

<app-root>
  Loading ...
</app-root>

如果您要使用纯CSS加载程序，请修改index.html使其如下所示：

<body>
   <app-root>
     <div class="loader">Loading ...</div>
   </app-root>
</body>

现在根据您的喜好为.loader类设置动画。您可以使用在这里创建的Plunker：http://next.plnkr.co/edit/Ox5uJGpDSkMYQ9Fp

使用* ngIf

2 个答案: