angular - Angular 按钮内的微调器

Question

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

但在更新之前，我需要在这个按钮内设置微调器。

我在网上冲浪，有一个选项mat-progress-buttons。问题是，微调器在按钮中间，没有显示任何文本，如Updating.

但是在更新之前我需要一个微调器。那个微调器也应该在按钮内。

提前致谢:)

Answer 1

您可以像这样创建一个可重用的按钮子组件:

Working Demo

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

child .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() {
  }

}

parent.html

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

parent .ts

spinLoader= false;

  onSubmit() {
    this.spinLoader = true
  }