Question

我想注入一个微调服务，然后调用以表明我们正在等待数据加载，然后再次调用以表明我们已经完成等待。该服务应处理动态加载微调器组件并将其覆盖在使用它的组件上。这是我的微调器组件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（平台：核心））[ComponentSpinnerService-> ViewContainerRef]：NullInjectorError：没有ViewContainerRef提供程序！在NullInjector.get（core.js：1354）

我该如何实现？

Answer 1

我不认为您可以将ViewContainerRef注入服务。有关替代方法，请参见link。

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

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

1 个答案: