Nuestro grupo de expertos pasados varios días de trabajo y de recopilar de información, obtuvieron la respuesta, deseamos que todo este artículo sea de utilidad en tu proyecto.
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));
Tienes la posibilidad recomendar esta sección si te valió la pena.