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

Question

我有一个 spinner ，但我也想要一些独立于组件的 spinner 中的文本。 例如，如果您正在执行保存操作，则微调器将显示：...保存。 但例如，如果您执行搜索操作。 微调器将显示： ..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>

要进一步调试，请创建一个 stackblitz。

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

微调组件

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 文件中将样式位置更改为相对，它应该可以工作：

HTML文件

    <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 ProgressSpinnerOverviewExample {
   color = 'primary';
  mode = 'indeterminate';
  value = 50;
  @Input()
  message = 'Hello';
  isLoading = true;
  constructor() {}
}

Answer 3

您可以在此StackBlitz 链接中找到工作演示

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

你的 app.component.html 是..

<mat-toolbar color="primary">Spinner Demo</mat-toolbar>

<div style="margin:1em">  
    <button style="margin:1rem" mat-raised-button color="primary" (click)="spinner('search')">Search</button>
    <button mat-raised-button color="primary" (click)="spinner('Send')">Send</button>
    <button style="margin:1rem" mat-raised-button color="primary" (click)="spinner('Save')">Save</button>
</div>
     <app-search-output ></app-search-output>

你的 app.component.ts 是...

export class AppComponent  {
  constructor( private serachService: SearchService){
  }
  spinner(term){
    this.serachService.sendData(term);
  }
  ngOnInit(){
  } 
}

您可以像这样使用behaviorSubject服务......

export class SearchService {
     searchData$: BehaviorSubject<object[]> = new BehaviorSubject<object[]>([{}]);
     constructor() { }
     sendData(term){
         this.searchData$.next(term)
     }
     getData(){
         return this.searchData$.asObservable();
     }
}

您的微调组件 HTML 是...

 <div style="margin:2em auto; padding:1rem; box-shadow: 1px 2px 7px red; width:50vw">
     <span style="margin:1em; padding:1rem">{{bookData$ |async |json}}</span>
     <mat-spinner style="margin:1em" color="warn" ></mat-spinner>
 </div>

你的 spinner.component.ts 是......

export class SearchOutputComponent implements OnInit {
   bookData$;
   constructor(private searchService: SearchService) { }
   ngOnInit() {
        this.bookData$ = this.searchService.getData();
   }
}