[英]Showing dynamic text in spinner angular material
I have a spinner , but I also want some text in the spinner independent of the component.我有一个 spinner ,但我也想要一些独立于组件的 spinner 中的文本。 So for example if you are doing a save action, then the spinner will showing: ...saving.例如,如果您正在执行保存操作,则微调器将显示:...保存。 But for example if you do a search action.但例如,如果您执行搜索操作。 The spinner will showing: ..processing and so on.微调器将显示: ..processing 等。
I have this as spinner component:我有这个作为微调组件:
<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>
and ts script:和 ts 脚本:
export class LoaderComponent {
color = 'primary';
mode = 'indeterminate';
value = 50;
message = 'Hello there';
isLoading: Subject<boolean> = this.loaderService.loaderState;
constructor(private loaderService: LoaderService) {}
}
and then for example I load the spinner in this component: listComponent然后例如我在这个组件中加载微调器:listComponent
<app-loader ></app-loader>
So I see the spinner but not the message.所以我看到了微调器,但没有看到消息。
So what I have to improve so that the text will also been shown?那么我必须改进什么才能使文本也显示出来?
And how to make the text dynamically?以及如何动态制作文本? So that you can put any text message in it?这样你就可以在里面放任何短信?
Thank you谢谢
I have it now like this:我现在是这样的:
<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) {}
}
and this is the css:这是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%);
}
You can pass text values as @Input
to your component and use the component as below您可以将文本值作为@Input
给您的组件并使用如下组件
I believe you are not able to see it because of css issue.我相信由于 css 问题,您无法看到它。 Try making the text position:absolute
.尝试使文本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>
To further debug please create a stackblitz.要进一步调试,请创建一个 stackblitz。
<app-loader [message] = "Processing"></app-loader>
Spinner 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) {}
}
Try to change style position to relative in your html file it should work:尝试在您的 html 文件中将样式位置更改为相对,它应该可以工作:
HTML file 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 file TS文件
export class ProgressSpinnerOverviewExample {
color = 'primary';
mode = 'indeterminate';
value = 50;
@Input()
message = 'Hello';
isLoading = true;
constructor() {}
}
You can find Working demo here in this StackBlitz Link您可以在此StackBlitz 链接中找到工作演示
You have to use Behavior Subject
and service
...你必须使用Behavior Subject
和service
......
Your app.component.html is..你的 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>
Your app.component.ts is...你的 app.component.ts 是...
export class AppComponent {
constructor( private serachService: SearchService){
}
spinner(term){
this.serachService.sendData(term);
}
ngOnInit(){
}
}
Your Service where you can use behaviorSubject
as like this...您可以像这样使用behaviorSubject
服务......
export class SearchService {
searchData$: BehaviorSubject<object[]> = new BehaviorSubject<object[]>([{}]);
constructor() { }
sendData(term){
this.searchData$.next(term)
}
getData(){
return this.searchData$.asObservable();
}
}
Your spinner component HTML is...您的微调组件 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>
Your spinner.component.ts is ...你的 spinner.component.ts 是......
export class SearchOutputComponent implements OnInit {
bookData$;
constructor(private searchService: SearchService) { }
ngOnInit() {
this.bookData$ = this.searchService.getData();
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.