typescript - encadenar - how to use forkjoin

Angular2 Observable.forkJoin de variables observables-ReferenceError: Observable no está definido

Question

Me gustaría pedirte ayuda. Omití el código que asumo no es importante. Imaginemos un archivo TS que contenga llamadas de servicio:

// archivo: someService.ts

@Injectable()
export class SomeService {
     method1(){
         var observable = this.http.get(someUrl)
                          .map((res: Response) =><MyClass[]>res.json());
         return observable;
     }

     method2(){
         // Similar to method1
     }
}

// archivo: someComponent.ts

Tenga en cuenta que this.method1observable y method2observable se asignan correctamente desde el componente principal (raíz) y su tipo es observable.

import {Observable}     from ''rxjs/Observable'';

export class SomeClass {
    public m1: Observable<MyClass[]>;
    public m2: Observable<AnotherClass[]>

    ngOnInit() {
        Observable.forkJoin(this.m1,this.m2) //<- ERROR HERE
        .subscribe(data => {
            this.myFunction(data[0], data[1]);
            requestAnimationFrame(this.renderLoop);
        });
    }
}

Me sale "Uncaught ReferenceError: Observable no está definido" . ¿No sabes qué estoy haciendo mal? Vi algunos ejemplos en los que se llama Observable.forkJoin dentro de un servicio. ¿Pero qué pasa si quiero llamarlo dentro de un componente?

Answer 1

Debes evitar importar toda la biblioteca de rxjs ya que es bastante grande. Si tiene las siguientes importaciones en cualquier lugar de su aplicación, importará los rxjs completos, así que tenga esto en cuenta:

import {Observable} from ''rxjs'';

o

import {Observable} from ''rxjs/Rx'';

En su lugar, puede importar las características individuales que utilizará, por ejemplo:

import {Observable} from ''rxjs/Observable'';
import ''rxjs/add/operator/map'';
import ''rxjs/add/observable/forkJoin'';

ACTUALIZACIÓN: a partir de rxjs 5.5, la forma recomendada para importar operadores es :

import { range } from ''rxjs/observable/range'';
import { map, filter, scan } from ''rxjs/operators'';

const source$ = range(0, 10);

source$.pipe(
  filter(x => x % 2 === 0),
  map(x => x + x),
  scan((acc, x) => acc + x, 0)
)
.subscribe(x => console.log(x))

Answer 2

Podrías intentar importar de esta manera:

import {Observable} from ''rxjs/Rx'';

en lugar de:

import {Observable} from ''rxjs/Observable'';

También debe utilizar una matriz para proporcionar sus observables al método forkJoin:

ngOnInit() {
        Observable.forkJoin([this.m1,this.m2])
        .subscribe(data => {
            this.myFunction(data[0], data[1]);
            requestAnimationFrame(this.renderLoop);
        });
    }

Y no te olvides de especificar entradas en @Component:

@Component({
    inputs: [''m1'', ''m2'']
})

Answer 3

puede consultar este enlace para obtener más información sobre el uso del método forkjoin () para ejecutar múltiples solicitudes http.get () concurrentes. Aquí puede obtener un ejemplo completo de trabajo.

http://www.metaltoad.com/blog/angular-2-http-observables