在角度4中，我如何制作一个可重复使用的按钮组件，它可以在单击时启用微调器

1 回答

• 2

  你可以做的是创建一个服务，它将显示和隐藏布尔属性作为observable . 然后，您可以创建具有按钮和微调器的可重用组件 . 然后在该组件中，您可以导入服务并随时调用show和hide，并订阅该服务并将show和hide布尔值附加到您的微调器 .

  UPDATE :

  您可以使用@Input在方法结束后进行微调器显示和隐藏 . 将要执行的函数传递给可重用按钮组件，并在按钮组件中执行该功能 . 并在执行后停止微调器 . 当方法在按钮组件内执行时，它会等待异步操作完成然后停止微调器 .

  progress-spinner.service.ts

  export class ProgressSpinnerService {
  
    constructor() { }
  
    private loaderSource = new Subject<ProgressSpinnerState>();
  
  // Observable string streams
    loaderStateChanged$ = this.loaderSource.asObservable();
  
    show() {
      this.loaderSource.next(<ProgressSpinnerState>{ show: true });
    }
    hide() {
      this.loaderSource.next(<ProgressSpinnerState>{ show: false });
    }
  
  }
  

  progress-spinner.component.ts

  export class ProgressSpinnerComponent implements OnInit {
  
    @Input() onClickFunction : any;
  
    show: boolean = false;
    private subscription: Subscription;
  
    constructor(
      private loaderService: ProgressSpinnerService
    ) {
      this.subscription = loaderService.loaderStateChanged$
          .subscribe((state: ProgressSpinnerState) => {
              this.show = state.show;
          });
    }
  
    async startLoader(){
       this.loaderService.show();
       console.log("1 - The fire method on the button has started and the spinner is shown");
       await this.onClickFunction();
       console.log("4 - Now the fire method is done and the spinner is told to stop");
       this.loaderService.hide();
     }
  
    ngOnDestroy() {
      this.subscription.unsubscribe();
    }
  }
  

  progress-spinner.component.html

  <button (click)="startLoader()">Start Loader</button>
  <div *ngIf="show">
    <div>
      <mat-progress-spinner>
      </mat-progress-spinner>
      
  
      <div>Please wait....</div>
    </div>
  </div>
  

  你可以参考下面

  WORKING DEMO

  回复于 2024-05-13T18:37:33+08:00