未显示垫旋转器

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>

登录组件和Spinner组件之间设置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

您只需添加Spinner组件即可像这样登录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;
    });
  }