定制的材料微调器不可见

问题描述

我有 angular 11 应用程序。我有一个微调器，当从后端加载数据时它必须是可见的。所以当用户按下 fa-icon 时。在数据从服务器返回的那一刻，fa-icon 不可见。但问题是微调器不可见。

所以这是微调器的自定义组件：

export class MatSpinnerOverlayComponent implements OnInit {
  constructor() { }

  @input() value : number = 100;
  @input() diameter: number = 100;
  @input() mode : string ="indeterminate";
  @input() strokeWidth : number = 10;
  @input() overlay: boolean = false;
  @input() color: string = "primary";


  ngOnInit(): void {}
}

模板：

<ng-container *ngIf="overlay; else progressspinner">
  <div class="overlay">
    <div class="center">
      <ng-template [ngTemplateOutlet]="progressspinner"></ng-template>
    </div>
  </div>
</ng-container>
<ng-template #progressspinner>
  <ng-template #progressspinner>
    <mat-progress-spinner
      [diameter]="diameter"
      [mode]="mode"
      [color]="color"
      [strokeWidth]="strokeWidth"
      [value]="value"
    >
    </mat-progress-spinner>
  </ng-template>
</ng-template>

和CSS：

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

:host ::ng-deep .track circle{
  stroke-opacity: 0.3 !important;
}

.overlay {
  height: 100vh;
  width: 100%;
  background-color: rgba(94,11,0.286);
  z-index: 10;
  top: 0;
  left: 0;
  position: fixed;
}

以及我注入微调器的组件：

<button *ngIf= "!isLoading"
    (click)="createChartFromMap(selectedSensor.sensor.charts[0],selectedSensor.properties['key'],selectedSensor.properties['name'] )"
    class="ml-auto unstyled-button" [disabled]="(mapRegistryService.$blockButtonGraph | async)" >
    <fa-icon [icon]="selectedSensor.sensor.icon"  [styles]="{'color': '#BF0404'}" size="lg" class="menu-list-item">
    </fa-icon>
  </button>
   <app-mat-spinner-overlay *ngIf="isLoading" style="margin:0 auto;" mode="determinate" strokeWidth="20" value="100" diameter="70"  class="mat-spinner-color"></app-mat-spinner-overlay>

我已经添加了

MatProgressspinnerModule

在 app.module 中。

所以我的问题是如何显示微调器？

谢谢

例如在 mat-spinner-overlay 中。当我在这一行上放置一个断点时：

ngOnInit(): void {}

它碰到了那条线。

但是微调器不可见

我在这里声明了自定义微调器：

@NgModule({
  declarations: [CustomElementDirective,WidgetEditorDirective,MatSpinnerOverlayComponent],imports: [
    CommonModule,FontAwesomeModule,RouterModule,MatProgressspinnerModule,],exports: [CustomElementDirective,MatSpinnerOverlayComponent]
})
export class SharedModule { }

并且 sharedModule 在 app.module 中声明

这是选择器：

 selector: 'app-mat-spinner-overlay'

哦，如果我这样做：

HELLO1
<ng-container *ngIf="overlay; else progressspinner">
  <div class="overlay">
    <div class="center">

      HELLO2
      <ng-template [ngTemplateOutlet]="progressspinner"></ng-template>
    </div>
  </div>
</ng-container>
<ng-template #progressspinner>
  <ng-template #progressspinner>
    <mat-progress-spinner

      [diameter]="diameter"
      [mode]="mode"
      [color]="color"
      [strokeWidth]="strokeWidth"
      [value]="value"
    >
    </mat-progress-spinner>
    HELLO3
  </ng-template>
</ng-template>

我只看到 HELLO1 没有看到其他的 hello

解决方法

只是想确认一下，您是否为模板中的自定义微调器使用了正确的选择器？我在你的代码中的任何地方都看不到它。

此外，当您检查浏览器控制台时，您是否看到那里有任何错误？这可能有助于故障排除。

让我们知道什么对您有用。

,

哦，

刚刚移除了内联样式：

   <app-mat-spinner-overlay *ngIf="isLoading"></app-mat-spinner-overlay>