Question

我在角度4中创建了一个应用程序，我希望有一个加载组件，这样用户就可以意识到他提交了一个表单而应用程序正在做某事，并且应用程序正在等待来自后端的信息

我在angularjs中通过使用加载程序组件并使用$ rootScope共享隐藏或显示的动作来完成它...但是在angular2 / 4中我不知道如何做到这一点。

理想情况下，我需要有一个加载组件，它将在页面的一个表单或某个部分上（当正在检索属于该部分的信息时）或者可能在整个屏幕上。

您能否提供一些关于如何做到这一点的线索？

谢谢！

Answer 1

您需要创建一个可以存储对加载组件的引用的加载服务。然后在需要能够切换该加载组件的其他组件的构造函数中注入该加载服务。

import { Injectable } from '@angular/core';
import { LoadingComponent } from './loading.component';

@Injectable()
export class LoadingService {
  private instances: {[key: string]: LoadingComponent} = {};

  public registerInstance(name: string, instance: LoadingComponent) {  
    this.instances[name] = instance;
  }

  public removeInstance(name: string, instance: LoadingComponent) {
    if (this.instances[name] === instance) {
      delete this.instances[name];
    }
  }

  public hide(name: string) {
    this.instances[name].hide();
  }

  public show(name: string) {
    this.instances[name].show();
  }
}

请务必在模块的LoadingService阵列中注册providers！

然后在LoadingComponent中您可以注入LoadingService，以便LoadingComponent可以使用LoadingService注册自己，它应该注册该服务：

import { Component, OnInit, Input, OnDestroy } from '@angular/core';
import { LoadingService } from './loading.service';

@Component({
  selector: 'yourapp-loading',
  templateUrl: './loading.component.html',
  styleUrls: ['./loading.component.scss']
})
export class LoadingComponent implements OnInit, OnDestroy {
  @Input() name: string;
  private isVisible = false;

  constructor(private service: LoadingService) {}

  ngOnInit() {
    if (this.name) {
      this.service.registerInstance(this.name, this);
    }
  }

  ngOnDestroy() {
    if (this.name) {
      this.service.removeInstance(this.name, this);
    }
  }

  /* ... code to show/hide this component */
}

Answer 2

基本上，您可以使用loader作为HTML loader组件，并且可以设置主component的值。如下所示，我以material2为例。

你的spinner.ts

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

@Component({
  selector: 'app-loader',
  templateUrl: './loader.component.html',
  styleUrls: ['./loader.component.css']
})
export class LoaderComponent{
  @Input() show:boolean;
}

HTML：

 <div *ngIf="show">
      <md-spinner></md-spinner>
    </div>

您要使用spinner。

的组件

<app-loader [show]="showLoader">

  </app-loader>

在您的TS中，只需将showLoader的值设置为true / false。

P.S - 确保你照顾好position和z-index，以便它能在所有内容之上。

Answer 3

这可能会对你有所帮助使用输入类成员

创建一个名为loading component的组件，如下所示

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

@Component({
selector: 'app-loader',
templateUrl: './loader.component.html',
styleUrls: ['./loader.component.css']
})
export class LoaderComponent implements OnInit {
@Input() loading: boolean = false;
constructor() { }

ngOnInit() {
}

}

并在模板中

<div class="ui " *ngIf="loading">
  <div class="ui active dimmer">
    <div class="ui large text loader">Loading</div>
  </div>
  <p></p>
</div>

在上面的代码中我使用了semantic-ui框架的loader。你可以根据你的项目需求使用任何加载器。接下来你必须使用加载器的组件，在模板中只使用loader组件作为子组件像这样

<div class="center">
  <app-loader [loading]="loading"></app-loader>
</div>

并在.ts文件中将输入变量声明为

loading: boolean = false;

当您必须启动加载程序时，只需创建

this.loading=true

并且您的装载机将启动。要解除加载只需要生成

this.loading=false;

这应该可以解决问题。它在here

中得到了很好的解释

在Angular2 / 4中加载组件

3 个答案: