垫旋转器未显示答案

【问题标题】：Mat spinner is not shown垫旋转器未显示
【发布时间】：2020-06-08 21:27:47
【问题描述】：

我想在处理登录时显示一个微调器。

login.component.ts:

constructor(public spinner: SpinnerComponent) { }

  ngOnInit() {
    this.spinner.showSpinner = false;
  }

  login() {
    this.spinner.showSpinner = true;
    this.userService.login(this.username, this.password).subscribe(loginResponse => {
      ...
      this.spinner.showSpinner = false;
    });
  }

spinner.component.ts：

export class SpinnerComponent {

  @Input()
  showSpinner;

  constructor() { }
}

spinner.component.html:

<div *ngIf="showSpinner">
    <mat-spinner [mode]="indeterminate"></mat-spinner>
</div>

登录组件和微调器组件之间设置showSpinner值的通信似乎不正确。

知道如何显示微调器吗？

【问题讨论】：

可以给我看看login.component.html的代码吗？
你为什么要像服务一样注入组件？构造函数（公共微调器：SpinnerComponent）
像这个构造函数(public spinner: SpinnerComponent) { }这样注入组件是错误的

标签： angular login spinner

【解决方案1】：

您只需像这样将微调器组件添加到登录 html

login.component.html

<app-spinner [showSpinner]="showSpinner"></app-spinner>

login.component.ts：

  public showSpinner:bollean=false; 
  ngOnInit() {
    this.showSpinner = false;
  }

  login() {
    this.showSpinner = true;
    this.userService.login(this.username, this.password).subscribe(loginResponse => {
      ...
      this.showSpinner = false;
    });
  }

【讨论】：

谢谢！它现在正在工作。那么我是否需要将 app-spinner 添加到我想显示微调器的所有组件的 html 中？有没有其他方法可以将其添加到 app.component.html 中？
是的，您可以创建一个服务并从该服务切换showSpinner 的状态，我将更新我的答案并包括这一点@RAL

【解决方案2】：

不要将 @Input() 与 showSpinner 属性一起使用

只需像布尔值一样创建showspinner，

showSpinner: boolean;

@Input() 装饰器意味着您正在通过组件装饰器传递值

【讨论】：

【解决方案3】：

isWaiting: boolean = false;
constructor() { 
}
ngOnInit() { 
}

login() {
  this.isWaiting = true;
  this.userService.login(this.username, 
    this.password).subscribe(loginResponse => {
    ...
    this.isWaiting = false;
  });
}

在html中

<mat-spinner *ngIf="isWaiting" [mode]="'indeterminate'"> 
</mat-spinner>

【讨论】：