在微调器角度材料中显示动态文本

Question

我有一个微调器，但是我也想要微调器中的一些独立于组件的文本。因此，例如，如果您正在执行保存操作，则微调器将显示：...正在保存。但例如，如果您执行搜索操作。微调器将显示：..processing等。

我将其作为微调器组件：

<div *ngIf="(isLoading | async)" class="overlay">
  <div>
    <mat-progress-spinner class="spinner" [color]="color" [mode]="mode" [value]="value"> </mat-progress-spinner>
    <div style="position:relative; top: -60px; left: 30px;">{{message}}</div>
  </div>
</div>

和ts脚本：

export class LoaderComponent {
  color = 'primary';
  mode = 'indeterminate';
  value = 50;
  message = 'Hello there';
  isLoading: Subject<boolean> = this.loaderService.loaderState;
  constructor(private loaderService: LoaderService) {}
}

然后例如，我将微调器加载到此组件中：listComponent

   <app-loader ></app-loader>

所以我看到了微调框，但看不到消息。

所以我需要改进什么才能使文本也显示出来？

以及如何动态制作文字？这样您就可以在其中输入任何短信了？

谢谢

我现在有这样的人：

<div *ngIf="(isLoading | async)" class="overlay">
  <div>
    <mat-progress-spinner class="spinner" [color]="color" [mode]="mode" [value]="value"> </mat-progress-spinner>
    <div style="position:absolute; top: -60px; left: 30px;">{{message}}</div>
  </div>
</div>

export class LoaderComponent {
  color = 'primary';
  mode = 'indeterminate';
  value = 50;
  @Input()
  message = 'Hello there';

  isLoading: Subject<boolean> = this.loaderService.loaderState;
  constructor(private loaderService: LoaderService) {}
}

这是css：

.overlay {
  position:fixed;
  display:block;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background-color:rgba(74,74,74,.8);
  z-index:99999;
}
 .spinner {
   margin:auto;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

Answer 1

您可以将文本值作为@Input传递到组件，并按以下方式使用组件

我相信您由于CSS问题而无法看到它。尝试使文本为position:absolute。

<div *ngIf="(isLoading | async)" class="overlay">
  <div>
    <mat-progress-spinner class="spinner" [color]="color" [mode]="mode" [value]="value"> </mat-progress-spinner>
    <div style="position:absolute; top: -60px; left: 30px;">{{message}}</div>
  </div>
</div>

要进一步调试，请创建一个堆栈闪电战。

<app-loader [message] = "Processing"></app-loader>

Spin​​ner Component] >>

import { Component, Input, OnInit } from '@angular/core';

export class LoaderComponent {
  color = 'primary';
  mode = 'indeterminate';
  value = 50;
  @Input()
  message = 'Hello there'; // Default text will be Hello there but if you pass anything as stated above then it will be replaced.
  isLoading: Subject<boolean> = this.loaderService.loaderState;
  constructor(private loaderService: LoaderService) {}
}

Answer 2

尝试在您的html文件中将样式位置更改为相对位置，它应该起作用：

Answer 3

您可以在此StackBlitz Link中找到工作演示”>

您必须使用Behavior Subject和service ...