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

我有一个微调器，但我也希望微调器中有一些独立于组件的文本。例如，如果您正在执行保存操作，则微调器将显示：…saving。但例如，如果您执行搜索操作。微调器将显示：…加工等

我将此作为微调器组件：

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

---

您可以将文本值作为

@Input

传递给组件，并按如下方式使用组件

我相信你不能看到它，因为css的问题。尝试使文本

位置：绝对

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


{{message}}

要进一步调试，请创建stackblitz


微调器组件

从'@angular/core'导入{Component，Input，OnInit}；
导出类装入器组件{
颜色='primary'；
模式='不确定'；
数值=50；
@输入（）
message='Hello there'；//默认文本将为Hello there，但如果您按上述方式传递任何内容，则它将被替换。
isLoading:Subject=this.loaderService.loaderState；
构造函数（私有loaderService:loaderService）{}
}
您可以将文本值作为
@Input
传递给您的组件，并使用组件，如下所示

我相信你不能看到它，因为css的问题。尝试使文本
位置：绝对

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


{{message}}

要进一步调试，请创建stackblitz


微调器组件

从'@angular/core'导入{Component，Input，OnInit}；
导出类装入器组件{
颜色='primary'；
模式='不确定'；
数值=50；
@输入（）
message='Hello there'；//默认文本将为Hello there，但如果您按上述方式传递任何内容，则它将被替换。
isLoading:Subject=this.loaderService.loaderState；
构造函数（私有loaderService:loaderService）{}
}
尝试将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>

export class ProgressSpinnerOverviewExample {
   color = 'primary';
  mode = 'indeterminate';
  value = 50;
  @Input()
  message = 'Hello';
  isLoading = true;
  constructor() {}
}

尝试将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>

export class ProgressSpinnerOverviewExample {
   color = 'primary';
  mode = 'indeterminate';
  value = 50;
  @Input()
  message = 'Hello';
  isLoading = true;
  constructor() {}
}

你可以在这里找到工作演示

您必须使用
行为主题
和
服务

您的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>

您可以像这样使用
行为主体
的服务

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

你可以在这里找到工作演示

您必须使用
行为主题
和
服务

您的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>

您可以像这样使用
行为主体
的服务

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

“因此，我看到了微调器，但没有看到消息”如果您无法在那里看到hello，因为这是组件中的message属性。ts那么您应该首先关注div样式。“因此，我看到了微调器，但没有看到消息”如果您无法在那里看到hello，因为它是component.ts中的message属性，那么您应该首先关注div样式。谢谢您的评论。但我仍然只看到旋转器，没有文本。我制作了属性：process='processing'；在模板中：请创建一个stackblitz以进一步调试，或者您可以打开开发工具并检查它。感谢您的评论。但我仍然只看到旋转器，没有文本。我制作了属性：process='processing'；在模板中：请创建一个stackblitz来进一步调试，或者您可以打开开发工具并检查它。
export class AppComponent  {
  constructor( private serachService: SearchService){
  }
  spinner(term){
    this.serachService.sendData(term);
  }
  ngOnInit(){
  } 
}

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

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

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