角度 8 微调器组件 - 使用服务加载

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() {
}
}

这是我的组件微调器.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);
}
}

所以我希望微调器组件加载，如果这个.spinnerSvc.showSpinner(true(;.. 目前我有错误 main.ts：12 错误： StaticInjectorError(AppModule([ComponentSpinnerService -> ViewContainerRef]： StaticInjectorError(Platform： core([ComponentSpinnerService -> ViewContainerRef]： NullInjectorError： 没有 ViewContainerRef！ at NullInjector.get 的提供程序 (core.js：1354(

我如何实现这一点？

Answer 1

我不相信你可以将ViewContainerRef注入到服务中。 有关替代方案，请参阅链接。

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