Angular utiliza observables como interfaz para manejar una variedad de operaciones asincrónicas comunes. Por ejemplo:

  • Puede definir eventos personalizados que envíen datos de salida observables de un componente secundario a un componente principal.
  • El módulo HTTP utiliza observables para manejar solicitudes y respuestas AJAX.
  • Los módulos Router y Forms utilizan observables para escuchar y responder a los eventos de entrada del usuario.

Transmisión de datos entre componentes

Angular proporciona una EventEmitter clase que se utiliza al publicar valores de un componente a través de la @Output() decorador. EventEmitter se extiende RxJS Subject, agregando un emit() método para que pueda enviar valores arbitrarios. Cuando usted llama emit(), pasa el valor emitido al next() método de cualquier observador suscrito.

Se puede encontrar un buen ejemplo de uso en la documentación de EventEmitter. Aquí está el componente de ejemplo que escucha eventos abiertos y cerrados:

Aquí está la definición del componente:

@Component(
  selector:'app-zippy',
  template:`
    
      Toggle
      
        
      
    
  `,)exportclassZippyComponent
  visible =true;@Output() open =newEventEmitter<any>();@Output() close =newEventEmitter<any>();toggle()this.visible =!this.visible;if(this.visible)this.open.emit(null);elsethis.close.emit(null);

HTTP

Angular HttpClient devuelve observables de llamadas al método HTTP. Por ejemplo, http.get(‘/api’) devuelve un observable. Esto proporciona varias ventajas sobre las API HTTP basadas en promesas:

  • Los observables no mutan la respuesta del servidor (como puede ocurrir a través de encadenado .then() llama a promesas). En su lugar, puede utilizar una serie de operadores para transformar valores según sea necesario.
  • Las solicitudes HTTP se pueden cancelar a través del unsubscribe() método.
  • Las solicitudes se pueden configurar para obtener evento de progreso actualizaciones.
  • Las solicitudes fallidas se pueden reintentar fácilmente.

Tubería asíncrona

AsyncPipe se suscribe a un observable o promesa y devuelve el último valor que ha emitido. Cuando se emite un nuevo valor, la tubería marca el componente que se debe verificar para ver si hay cambios.

El siguiente ejemplo vincula el time observable a la vista del componente. El observable actualiza continuamente la vista con la hora actual.

@Component(
  selector:'async-observable-pipe',
  template:`observable)exportclassAsyncObservablePipeComponent
  time =newObservable<string>(observer =>setInterval(()=> observer.next(newDate().toString()),1000););

Enrutador

Router.events proporciona eventos como observables. Puedes usar el filter() operador de RxJS para buscar eventos de interés, y suscribirse a ellos para tomar decisiones basadas en la secuencia de eventos en el proceso de navegación. He aquí un ejemplo:

import Router, NavigationStart from'@angular/router';import filter from'rxjs/operators';@Component(
  selector:'app-routable',
  templateUrl:'./routable.component.html',
  styleUrls:['./routable.component.css'])exportclassRoutable1ComponentimplementsOnInit

  navStart: Observable<NavigationStart>;constructor(private router: Router)// Create a new Observable that publishes only the NavigationStart eventthis.navStart = router.events.pipe(filter(evt => evt instanceofNavigationStart))as Observable<NavigationStart>;ngOnInit()this.navStart.subscribe(evt =>console.log('Navigation Started!'));

ActivatedRoute es un servicio de enrutador inyectado que utiliza observables para obtener información sobre la ruta y los parámetros. Por ejemplo, ActivatedRoute.url contiene un observable que informa sobre la ruta o los caminos. He aquí un ejemplo:

import ActivatedRoute from'@angular/router';@Component(
  selector:'app-routable',
  templateUrl:'./routable.component.html',
  styleUrls:['./routable.component.css'])exportclassRoutable2ComponentimplementsOnInitconstructor(private activatedRoute: ActivatedRoute)ngOnInit()this.activatedRoute.url
      .subscribe(url =>console.log('The URL changed to: '+ url));

Formas reactivas

Las formas reactivas tienen propiedades que usan observables para monitorear los valores de control de formas. los FormControl propiedades valueChanges y statusChanges contienen observables que generan eventos de cambio. Suscribirse a una propiedad de control de forma observable es una forma de activar la lógica de la aplicación dentro de la clase de componente. Por ejemplo:

import FormGroup from'@angular/forms';@Component(
  selector:'my-component',
  template:'MyComponent Template')exportclassMyComponentimplementsOnInit
  nameChangeLog:string[]=[];
  heroForm: FormGroup;ngOnInit()this.logNameChange();logNameChange()const nameControl =this.heroForm.get('name');
    nameControl.valueChanges.forEach((value:string)=>this.nameChangeLog.push(value));