未显示垫微调器

Question

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

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 值的通信似乎不正确。

知道如何显示微调器吗？

Answer 1

不要将 @Input() 与 showSpinner 属性

一起使用

只需将 showspinner 创建为布尔值，

showSpinner: boolean;

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

Answer 2

login.component.ts

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>

Answer 3

您只需像这样将微调器组件添加到登录 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;
    });
  }