在Angular2/4中加载组件

Question

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

我通过一个加载器组件并使用$ rootScope共享隐藏或显示的动作在angularjs中做到了...但是在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 */
}