如何为旋转器创建转角指令？

Question

我在项目中工作，并使用了ngx-旋转器库，现在我想为这个旋转器做指令，并在里面编写HTML代码。

<ngx-spinner type="ball-scale-multiple" [fullScreen]="false" size="" style="width: 100px;" bdColor="rgba(0, 0, 0, 0.5)">loading ...</ngx-spinner>

我该怎么做？

Answer 1

我找到的解决方案是为旋转器创建单独的组件。

<ngx-spinner type="ball-scale-multiple" [fullScreen]="false" size="larg" style="width: 100px;"
bdColor="rgba(0, 0, 0, 0.2)">
<p style="color: white;"> loading ...</p>

以及指令

import { ComponentFactoryResolver, Directive, ElementRef, Input, OnChanges, OnInit, 
    SimpleChanges, TemplateRef, ViewContainerRef } from "@angular/core";
import { NgxSpinnerService } from "ngx-spinner";
import { SpinnerComponent } from "../spinner/spinner.component";

@Directive({
    selector: '[appSpinner]'

})
export class SpinnerDirective implements OnInit, OnChanges {

    @Input('appSpinner') show: boolean;

    constructor(private ngxSpinnerService: NgxSpinnerService, private elementRef: ElementRef, 
        private viewContainerRef:ViewContainerRef, private componentFactoryResolver:ComponentFactoryResolver,
        private templateRef:TemplateRef<any>) {

    }

    ngOnInit(): void {
    }

    ngOnChanges(changes: SimpleChanges): void {
        if(this.show){
            this.viewContainerRef.clear()
            const spinnerComponent = this.componentFactoryResolver.resolveComponentFactory(SpinnerComponent);
            this.viewContainerRef.createComponent(spinnerComponent);
            
            this.ngxSpinnerService.show()
        }
        else{
            this.viewContainerRef.clear()
            this.viewContainerRef.createEmbeddedView(this.templateRef)
        }
    }
}

并以这种方式使用对元素的指令。

<div *appSpinner="showSpinner">content</div>