2

我正在以 Angular 4 创建一个应用程序，并且我想要一个加载组件，以便用户可以意识到他提交了一个表单并且该应用程序正在做某事，并且该应用程序正在等待来自后端的信息。

我通过拥有一个加载器组件并使用 $rootScope 共享隐藏或显示的操作在 angularjs 中做到了这一点……但在 angular2/4 中，我不知道如何做到这一点。

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

您能否提供有关如何执行此操作的线索？

谢谢！

4

3 回答 3

6

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

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 */
}
于 2017-08-09T17:33:11.543 回答
0

基本上，您可以拥有一个loader带有loaderas HTML 的组件，并且可以从 master 设置值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。

PS - 确保你照顾好它position，z-index让它在一切之上。

于 2017-08-09T17:37:10.857 回答
0

这可能会帮助您创建一个名为加载组件的组件，例如使用输入类成员

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>

在上面的代码中，我使用语义 UI 框架的加载器。您可以根据项目要求使用任何加载器。接下来在您必须使用加载器的组件中，在模板中只需将加载器组件用作子组件，如下所示

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

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

loading: boolean = false;

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

this.loading=true

你的装载机就会启动。要解除装载，只需制作

this.loading=false;

这应该可以解决问题。这里已经很好地解释了

于 2017-08-09T17:44:12.000 回答