Tengo componentes llamados app.component, que es el componente principal del proyecto angular. La navegación al componente del cliente se realiza mediante enrutamiento. Y
Estructura de carpetas src\app
- app.component.html - app.component.tsy src\aplicación\componentes\cliente
- customer.component.html - customer.component.tsEn mi app.component.html
<div class="top-container" #topContainerRef> <router-outlet></router-outlet> </div>En mi cliente.component.ts
Quiero obtener una referencia del div de contenedor más alto que se encuentra en app.components
quiero reemplazar
document.getElementsByClassName('top-container')[0].scrollTop = some valuescon algo parecido a
@ViewChild('topContainerRef', { read: ElementRef, static: false }) topContainerRef: ElementRef; this.topContainerRef.nativeElement.scrollTop= "some value" //here the topContainerRef is undefined¿Hay alguna manera de que pueda usar elementRef en lugar de classname o Id's?
No puede usar ViewChild para el #topContainerRef para obtener una referencia de este elemento, porque su CustomerComponent no lo representa.
Debe obtener la referencia de este elemento dentro del componente de la aplicación y encontrar una manera de pasarlo a todos los demás niños que puedan necesitarlo (no recomendado).
O simplemente puede crear un servicio y usarlo para "solicitar" el cambio de scrollTop por cualquier componente que tenga acceso a este elemento (en su caso, el componente de la aplicación).
Yo lo haría algo como esto:
export class AppContainerService { private scrollTopSource = new ReplaySubject<number>(1); public scrollTop$ = this.scrollTopSource.asObservable(); public updateScrollTop(value: number) { this.scrollTopSource.next(value); } } Dentro de su componente de CustomerComponent :
public class CustomerComponent implements OnInit { // ... constructor(private containerService: AppContainerService) { } ngOnInit() { this.containerService.updateScrollTop(/* whatever value you need */); } // ... }Y finalmente, el AppComponent que reaccionará a los cambios de scrollTop:
export class AppComponent implements AfterViewInit { @ViewChild('topContainerRef', { read: ElementRef, static: false }) topContainerRef: ElementRef; private subscriptions = new Subscription(); constructor(private containerService: AppContainerService) { } ngAfterViewInit() { this.subscriptions.add(this.containerService.scrollTop$.subscribe((value: number) => { this.topContainerRef.nativeElement.scrollTop = value; })); } ngOnDestroy() { this.subscriptions.unsubscribe(); } } No te olvides de cancelar la suscripción dentro de ngOnDestroy . Esto es importante para que no tengas pérdidas de memoria.