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

您可以在此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();
   }
}

Answer 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>

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

<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 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() {}
}

在微调器棱角材质中显示动态文本

3 个答案: