Tengo un servicio de cargador del curso de Angular University:


@Injectable()
export class LoadingService {
  private loadingSubject = new BehaviorSubject<boolean>(false);
  loading$: Observable<boolean> = this.loadingSubject.asObservable();

  showLoaderUntilCompleted<T>(obs$: Observable<T>): Observable<T> {
    return of(null).pipe(
      tap(() => this.on()),
      concatMap(() => obs$),
      finalize(() => this.off())
    );
  }

  on() {
    this.loadingSubject.next(true);
  }

  off() {
    this.loadingSubject.next(false);
  }
}

Y su uso en un componente:

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
  providers: [LoadingService]
})
export class AppComponent {
  loading$: Observable<boolean>;
  constructor(private loader: LoadingService) {
    this.loading$ = loader.loading$;
  }
  submit() {
    this.loader.showLoaderUntilCompleted(timer(1000)).subscribe();
  }

  submit2() {
    this.loader.showLoaderUntilCompleted(timer(1000)).subscribe();
  }
}

Y la plantilla:

<form (ngSubmit)="submit()">
  {{ loading$ | async }}
  <button type="submit">Submit</button>
</form>

<form (ngSubmit)="submit2()">
  {{ loading$ | async }}
  <button type="submit">Submit</button>
</form>

Funciona perfectamente en un caso en el que el componente tiene solo un formulario, ¿alguien puede sugerir cómo puedo reutilizarlo con varios formularios en la página? El objetivo es tener diferentes estados de cargador para cada formulario.

Enlace a stackblitz

1
Oleksii 5 mar. 2021 a las 18:41

1 respuesta

La mejor respuesta

Usted mismo respondió la pregunta. "El objetivo es tener diferentes estados de cargador para cada formulario" , por lo que cada formulario necesita su propio cargador.

Puede crear dos instancias diferentes del servicio para dos cargadores independientes no relacionados.

Controlador

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
  providers: [LoadingService]
})
export class AppComponent {
  private loader1: LoadingService;
  private loader2: LoadingService;

  loading1$: Observable<boolean>;
  loading2$: Observable<boolean>;

  constructor() {
    this.loader1 = new LoadingService();
    this.loader2 = new LoadingService();

    this.loading1$ = this.loader1.loading$;
    this.loading2$ = this.loader2.loading$;
  }

  submit() {
    this.loader1.showLoaderUntilCompleted(timer(1000)).subscribe();
  }

  submit2() {
    this.loader2.showLoaderUntilCompleted(timer(1000)).subscribe();
  }
}

Plantilla

<form (ngSubmit)="submit()">
    {{ loading1$ | async }}
    <button type="submit">Submit</button>
</form>

<form (ngSubmit)="submit2()">
    {{ loading2$ | async }}
    <button type="submit">Submit</button>
</form>

Modifiqué su Stackblitz. .

2
Michael D 5 mar. 2021 a las 15:54