globleVariable: any; ngOnInit() { // This doesn't work. methodTwo throws error saying "cannot read someField from null. " this.methodOne(); this.methodTwo(); } methodOne() { this.firstService.subscribe((res) => { this.globleVariable = res }); } methodTwo() { this.secondService.subscribe((res) => { console.log(this.globleVariable.someField) }); } Como se muestra arriba, methodOne establece el valor de globleVariable y methodTwo lo usa, por lo tanto, el primero debe terminar de ejecutarse antes que el segundo.
Me pregunto cómo lograr eso.
En lugar de suscribirse a los métodos, combínelos en una secuencia y suscríbase a eso en ngInit() . Puede usar tap para realizar el efecto secundario de actualizar globaleVariable que estaba realizando anteriormente en subscribe() .
En el siguiente ejemplo, los "métodos" se convierten en campos, ya que no hay razón para que sigan siendo métodos (puede mantenerlos como métodos si lo desea). Luego, el operador concat se usa para crear una secuencia única, donde se ejecutará methodOne$ y luego, cuando esté completo, se ejecutará methodTwo$ .
Debido a que concat se ejecuta en orden, tiene la garantía de que methodOne $ establecerá globaleVariable antes de que comience methodTwo$ .
globleVariable: any; methodOne$ = this.someService.pipe(tap((res) => this.globleVariable = res)); methodTwo$ = this.someService.pipe(tap((res) => console.log(this.globleVariable.someField)); ngOnInit() { concat(this.methodOne$, this.methodTwo$).subscribe(); }Puede crear un tema para el cual Observable 2 esperará para suscribirse como se muestra a continuación: -
globalVariable: any; subject: Subject = new Subject(); methodOne() { this.someService.subscribe((res) => { this.globleVariable = res; this.subject.next(); }); } methodTwo() { this.subject.pipe(take(1), mergeMap(() => this.someService)).subscribe((res) => { console.log(this.globleVariable.someField) }); }mi toma,
por lo tanto, es un poco confuso cuando usa el mismo servicio que arroja resultados diferentes, así que en lugar de someService , usé firstService y secondService aquí.
this.firstService.pipe( switchMap(globalVariable) => this.secondService.pipe( map(fields => Object.assign({}, globalVariable, { someField: fields })) ) ) ).subscribe(result => { this.globalVariable = result; })Lo que me gusta de este enfoque es que tiene la flexibilidad de cómo quiere usar el resultado final, ya que está desacoplado de cualquiera de las propiedades de su clase.