Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

121
Views
¿Ventaja de mapear con un enlace asíncrono frente a una propiedad de componente en Angular?

¿Hay alguna ventaja o beneficio en usar un enlace asíncrono en lugar de solo mapear a un objeto concreto cuando mi llamada de servicio regresa con datos para mi página HTML?

Aquí hay un ejemplo de las dos opciones.

  1. Asignar a una propiedad de componente

 // component event: any; // ngOnInit() this.eventService.getEvent(this.id).pipe(take(1)).subscribe(response => { this.event = response; }, error => { console.log(error); }); // service getEvent(id: number): Observable<any> { return this.http.get<any>(this.baseUrl + 'events/' + id); }
 <div>{{event.title}}</div> <div>{{event.date}}</div>

  1. asignar a un enlace asíncrono

 // component event$: Observable<any> = of (undefined); // ngOnInit this.event$ = this.eventService.getEvent(this.id).pipe(take(1), catchError(error => { console.log(error); return throwError(error); })); // service getEvent(id: number): Observable<any> { return this.http.get<any>(this.baseUrl + 'events/' + id); }
 <div>{{(event$ | async).title}}</div> <div>{{(event$ | async).date}}</div>

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Método de tubería asíncrona

La tubería asíncrona se suscribe a un Observable o Promise y devuelve el último valor que ha emitido. Cuando se emite un nuevo valor, la canalización asíncrona marca el componente para verificar los cambios. Cuando el componente se destruye, la canalización asíncrona cancela la suscripción automáticamente para evitar posibles fugas de memoria. Cuando la referencia de la expresión cambia, la canalización asíncrona cancela automáticamente la suscripción del antiguo Observable o Promise y se suscribe al nuevo.

  1. Usamos este diseño cuando usamos la estrategia de detección de cambios Onpush con la biblioteca de administración de estado porque la detección de cambios funciona cuando obtenemos un objeto nuevo.

  2. Automáticamente suscribe y cancela la suscripción del observable o promesa sobre la destrucción del componente.

  3. más limpio y más legible, ya que puede tener un número de subs asíncronos en la vista.

método de suscripción

  1. Aquí tiene que cancelar la suscripción manualmente, al usar take cancelará la suscripción del observable, pero ¿qué pasa si necesita más datos de ese observable (limita el flujo de datos).

  2. La principal ventaja de este método es que puede ejecutar su lógica cuando recibe datos y puede usar esos datos en varios lugares del componente.

Hemos utilizado ambos patrones basados en los escenarios que se adaptan bien a una situación específica.

Nota: el método de canalización async necesita obtener una nueva referencia del objeto de datos que se le pasa para ejecutar la detección de cambios y actualizar la vista.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!