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

【问题标题】：Showing dynamic text in spinner angular material在微调器角度材料中显示动态文本
【发布时间】：2019-12-20 20:39:06
【问题描述】：

我有一个微调器，但我还希望微调器中有一些独立于组件的文本。因此，例如，如果您正在执行保存操作，则微调器将显示：...正在保存。但是例如，如果您执行搜索操作。微调器将显示：..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%);
}

【问题讨论】：

“所以我看到了微调器，但没有看到消息”如果你在那里看不到你好，因为那是你 component.ts 中的消息属性，那么你应该首先关注 div 样式。

标签： javascript html angular angular-material spinner

【解决方案1】：

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

你必须使用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();
   }
}

【讨论】：

【解决方案2】：

您可以将文本值作为@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) {}
}

【讨论】：

感谢您的评论。但我仍然只看到微调器，没有文字。我做了属性：process = 'processing';并在模板中：
请创建一个 stackblitz 以进一步调试，或者您可以打开开发工具并检查它。

【解决方案3】：

尝试在您的 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() {}
}

【讨论】：