Angular 8 Spinner 组件 - 使用服务加载答案

【问题标题】：Angular 8 Spinner component - load using serviceAngular 8 Spinner 组件 - 使用服务加载
【发布时间】：2020-03-31 19:46:00
【问题描述】：

我想注入一个微调器服务，然后调用以指示我们正在等待数据加载，然后再进行调用以指示我们已完成等待。该服务应处理动态加载微调器组件并将其覆盖在使用它的组件上。这是我的微调器组件 html 和 ts 文件：

<div class="spinner-container">
  <div class="spinner-content">
    <div class="spinner-icon-container">
      <div class="la-line-spin-fade-rotating la-2x spinner-icon">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div *ngIf="message" class="spinner-message">{{message}}</div>
  </div>
</div>

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

@Component({
  selector: 'app-spinner',
  templateUrl: './spinner.component.html',
  styleUrls: ['./spinner.component.scss']
})
export class SpinnerComponent implements OnInit {

  constructor() {
  }

  message: string;

  ngOnInit() {

  }
}

//这是我的component-spinner.service.ts文件

import { Injectable } from '@angular/core';
import { SpinnerComponent } from '../components/spinner/spinner.component';
import { ComponentFactory, ComponentFactoryResolver, ComponentRef, Directive, HostListener, Input, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ComponentSpinnerService implements OnInit {
  private message: string;


   showSpinner(spinning: boolean) {
    this.container.clear();
    if (spinning) {
      this.container.createEmbeddedView(this.template);
      this.spinnerComponent = this.container.createComponent(this.componentFactory);
      this.spinnerComponent.instance.message = this.message;
    } else {
      this.container.createEmbeddedView(this.template);
    }
  }

   spinnerMessage(message: string) {
    this.message = message;
  }

  componentFactory: ComponentFactory<SpinnerComponent>;
  spinnerComponent: ComponentRef<SpinnerComponent>;

  constructor(private container: ViewContainerRef,
    private template: TemplateRef<any>,
    private componentFactoryResolver: ComponentFactoryResolver) {
    this.componentFactory = this.componentFactoryResolver.resolveComponentFactory(SpinnerComponent);

  }

  ngOnInit(): void {

  }

}

// 这是我的 Appcomponnet.html 文件：

 <div class="container">
      <div class="row">
        <div class="col-6">
          <button class="btn btn-outline-primary" (click)="toggleDivALoading()">Toggle Loading for A</button>
        </div>
        <div class="col-6">
          <button class="btn btn-outline-primary" (click)="toggleDivBLoading()">Toggle Loading for B</button>
        </div>
      </div>
      <div class="row">
        <div class="col-6">
          <div class="card">
            <div class="card-header">
              DIV A
            </div>
            <div class="card-body">

            </div>
          </div>
        </div>
        <div class="col-6">
          <div class="card">
            <div class="card-header">
              DIV B
            </div>
            <div class="card-body">

            </div>
          </div>
        </div>
      </div>
    </div>

// 这是我的 Appcomponent.ts 文件：

 import {Component} from '@angular/core';
    import { ComponentSpinnerService } from '../app/services/component-spinner.service';
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss']
    })
    export class AppComponent {
      divALoading: boolean;
      divBLoading: boolean;
      constructor(

        private spinnerSvc: ComponentSpinnerService,
      ) {}

      ngOnInit() {

    }
    toggleDivALoading() {
      this.divALoading = !this.divALoading;
    }

    toggleDivBLoading() {

      this.spinnerSvc.showSpinner(true);
    }
    }

所以如果 this.spinnerSvc.showSpinner(true);.. 目前我有错误 main.ts:12 错误：StaticInjectorError(AppModule)[ComponentSpinnerService -> ViewContainerRef]: StaticInjectorError(Platform: core )[ComponentSpinnerService -> ViewContainerRef]: NullInjectorError: 没有 ViewContainerRef 的提供者！在 NullInjector.get (core.js:1354)

我如何做到这一点？

【问题讨论】：

标签： angular angular-material angular8 angular-services

【解决方案1】：

我不相信您可以将 ViewContainerRef 注入服务。请参阅link 了解替代方案。

我有一个类似的微调器设置，但我的微调器只是在我的 app.component.html 上，并且根据 spinnerService 值在它周围有一个 *ngIf。

【讨论】：