在 Angular2/4 中加载组件

Question

我正在 angular 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();
  }
}

请务必在模块的 providers 数组中注册您的 LoadingService！

然后在 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 组件，其中 loader 作为 HTML，并且您可以从主 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 的组件，如下所示，输入 class member

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框架的loader.You可以根据你的项目使用任何加载器requirement.Next在你必须使用加载器的组件中，模板只是像这样使用加载器组件作为子组件

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

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

loading: boolean = false;

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

this.loading=true

并且您的加载程序将 up.To 关闭加载只是

this.loading=false;

这应该做到 trick.Its 在 here

中得到了很好的解释

在 Angular2/4 中加载组件

Loading component in Angular2/4

angular

ngx-bootstrap