Angular 按钮内的微调器

Question

我有一个按钮Update。输入输入后，当用户输入时Update，按钮应该显示Updating而不是Update。

但我之前需要在这个按钮内添加微调器Updating。

我在网上冲浪，有一个选项mat-progress-buttons。问题是，微调器位于按钮中间，没有显示任何类似的文字Updating。

但我之前需要一个微调器Updating。该微调器也应该位于按钮内。

提前致谢 ：）

Answer 1

您可以创建一个可重用的按钮子组件，如下所示：

工作演示

孩子.html

<button [disabled]="disabled" class="btn rounded-btn btn-primary submitBtn"  [style.pointer-events]="spin?'none':''"  id=submitBtn>
   <i class="fa fa-spinner fa-spin " *ngIf="spin"> </i>
  &nbsp; {{spin? 'Updating' : 'Update'}} &nbsp;
</button>

孩子.ts

@Component({
  selector: 'save-button',
  templateUrl: './save-button.component.html',
  styleUrls: ['./save-button.component.css']
})
export class SaveButtonComponent implements OnInit {

  constructor() { }
  @Input() disabled: boolean;
  @Input() spin: boolean

  ngOnInit() {
  }

}

父级.html

<save-button  (click)="onSubmit()" [spin]="spinLoader"></save-button>

父.ts

spinLoader= false;

  onSubmit() {
    this.spinLoader = true
  }