Estoy usando un componente reutilizable privado interno. Mi problema es que el ancho no se actualiza dinámicamente cuando se actualiza la ventana gráfica. Aquí hay fragmentos de código relevante:
componente.ts
export class Component { modalWidth: string | undefined; ngOnInit() { this.breakpointServiceSubscription$ = this.breakpointService.breakpoint$.subscribe(() => { if (this.breakpointService.isSmall()) { console.log("small") this.modalWidth = "50px"; } else { this.modalWidth = "500px"; } } }componente.html
<modal [width]="modalWidth">...</modal>Se supone que el ancho y el alto cambian dinámicamente a medida que se cambia el tamaño del navegador, pero permanece del mismo tamaño que cuando se representó. Si abro el modal en una ventana gráfica específica, el tamaño siempre es correcto, solo es un problema una vez que intento cambiar el tamaño con el modal abierto.
Al iniciar sesión en la suscripción al servicio de punto de interrupción, siempre es correcta y se registrará dinámicamente.
Intenté convertir modalWidth y modalHeight en observables y usar una tubería asíncrona en el html, pero aún tiene el mismo comportamiento.
¿Algún consejo o sugerencia?
puede inyectar ChangeDetectorRef en el componente y después de cambiar modalWidth, llame a changeDetectorRef.detectChanges() para permitir que angular aplique el cambio inmediatamente a la vista.
constructor(private cdr: ChangeDetectorRef) {} ngOnInit() { this.breakpointServiceSubscription$ = this.breakpointService.breakpoint$.subscribe(() => { if (this.breakpointService.isSmall()) { console.log("small") this.modalWidth = "50px"; } else { this.modalWidth = "500px"; } // apply change immediately this.cdr.detectChanges(); }