Diseñé un componente de carga para que se muestren los elementos de entrada de formularios en mis formularios angulares mientras los campos se cargan desde la API. Aquí, tengo que proporcionar la altura y el ancho del componente al componente del app-loader para que pueda ocupar el espacio correspondiente.
Por ahora, lo que he hecho es usar manualmente una caja de interruptores y proporcionar alturas y anchos dentro de eso. Sin embargo, esto es difícil ya que tengo que desarrollar muchos otros tipos de entrada y también es aún más difícil hacerlo receptivo. Mi pregunta es, ¿existe una forma más eficiente de pasar dinámicamente la altura y el ancho del componente relevante para ese caso de cambio en particular al componente app-loader ?
Lo que tengo hasta ahora se muestra a continuación.
<ng-container *ngIf="!formInput.loaded" [ngSwitch]="formInput.type"> <div *ngSwitchCase="FORM_INPUT_TYPE.CHECKBOX"> <app-loader width="409" height="24"></app-loader> </div> <div *ngSwitchCase="FORM_INPUT_TYPE.IMAGE_DROP_AREA"> <app-loader width="414.66" height="96"></app-loader> </div> <div *ngSwitchCase="FORM_INPUT_TYPE.RATING"> <app-loader width="409" height="30"></app-loader> </div> <div *ngSwitchDefault> <app-loader width="645" height="39.75"></app-loader> </div> </ng-container>Inyecte el elemento ref del componente en el constructor de esta manera:
... private elem: ElementRef, ... Entonces puede obtener el elemento nativo por this.elem.nativeElement . Luego puede obtener la altura y el ancho mediante offsetHeight y offsetWidth . Si desea un div en particular, simplemente use @ViewChild() y haga lo mismo.
Sugerencia: por lo general, recuperará la altura y el ancho en ngOnInit . Sin embargo, según su situación, es posible que desee hacerlo en ngAfterViewInit o suscribirse al evento de desplazamiento con la directiva @HostBinding() .