Tengo una plantilla de componente muy simple:
<button (click)="emitNextValue()">Next Value</button> <p *ngIf="text$ | async"> {{ text$ | async }} </p>y código del componente:
export class AppComponent { count = 1; text$ = new Subject<string>(); emitNextValue(): void { this.text$.next(`Value ${this.count}`); this.count += 1; } } Como puede ver, el <p> en la plantilla debe mostrarse solo si text$ Los sujetos emiten valor. Al hacer clic en el botón "Siguiente valor", se llamará a next al tema y, por lo tanto, debería mostrarse el párrafo.
El problema es que <p> se muestra solo en el segundo clic, lo que creo que es incorrecto.
¿Alguna idea de lo que me estoy perdiendo, o este es un error real?
La demostración está disponible en stackblitz .
Esto se llama problema de "suscriptor tardío". Este problema ocurre cuando los valores Rx entrantes llegan antes de que se haya realizado la suscripción.
Si elimina la directiva * ngIf de html, funcionará como se esperaba.
<p> {{ text$ | async }} </p>la suscripción sucedió tarde. en el caso común, puede hacer que su suscripción reproduzca el último evento mediante el operador shareReplay (1 shareReplay(1) o utilizando ReplaySubject(1) . Pero en su caso particular, hay una mejor solución para eso.
<p *ngIf="text$ | async as text"> {{ text }} </p>ngIf permite "almacenar" el resultado de la expresión, lo cual es muy útil exactamente para esos casos
El hecho es que el elemento <p> se crea solo después de que se notifica el primer evento.
Entonces, después de que se notifica el primer evento, tiene el elemento en el Dom y, por lo tanto, también el {{ text$ | async }} . Luego, cuando se produce un segundo clic, se notifica un segundo evento y se activa el enlace.
Si sustituye el Subject por new ReplaySubject<any>(1) , el texto se mostrará también después del primer clic.
La razón es que ReplaySubject reproducirá el último valor que emitió tan pronto como se suscriba. Por lo tanto, incluso si el enlace de texto ocurre después de que se notifica el primer evento, el sujeto reproduce el valor notificado y, por lo tanto, se muestra en el elemento <p> .