自定义材料微调器不可见

Question

我有 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, 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, WidgetEditorDirective, FontAwesomeModule, 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's

Answer 1

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

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

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

Answer 2

哦，

刚刚去掉了内联样式：

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