Tengo una lista y puedo agregar/eliminar elementos de la lista. ¿Hay alguna manera de hacer que un evento se desplace a un índice específico (donde se agregó el elemento) cuando se agrega el elemento? En el ejemplo actual, el elemento se agrega al frente de la lista, por lo que el desplazamiento debe moverse hacia la parte superior
por ejemplo, cuando estoy en el medio (o al final) de la lista, si agrego un elemento a la lista, el desplazamiento se mueve hacia la parte superior de la lista. (o pasar a algún índice, en este caso, índice 0).
Dígame cómo pasar de los componentes principales a los secundarios sin cambiar la estructura del ejemplo.
Su problema es que ViewChild no irá a niveles más profundos al realizar consultas, por lo que no puede consultar un CdkVirtualScrollViewport en una plantilla de elementos secundarios. Podría resolver esto con una función de detección de cambios personalizada en su componente de lista .
Debe eliminar esto de su función app.ts -> addItem() :
// want to move scroll to the top of the list this.viewPort.scrollToIndex(0, 'smooth');y en su lugar cree una función de detección de cambios personalizada en su componente de lista , pero primero mueva el viewChild de CdkVirtualScrollViewport al componente de lista :
export class ListComponent { @ViewChild(CdkVirtualScrollViewport) viewPort: CdkVirtualScrollViewport; @Input() data: Favorite[]; @Output() removeData = new EventEmitter<Favorite>(); remove($event) { this.removeData.emit($event); } ngOnChanges(changes: SimpleChanges) { if ( changes.data && changes.data.currentValue && changes.data.previousValue && changes.data.currentValue.length >changes.data.previousValue.length ) { this.viewPort.scrollToIndex(0, 'smooth'); } } }Esto funciona perfectamente para mi. Cada vez que se agrega un elemento, se desplaza hacia la parte superior.
Enlace de stackblitz modificado:
https://stackblitz.com/edit/angular-ivy-k5pve6?file=src/app/list/list.component.ts
Otra solución (y tal vez mejor) podría ser pasar ListComponent como una referencia de plantilla a la función addItem() , luego usar la función de desplazamiento de la propiedad viewPort de los componentes.
Componente de lista
... export class ListComponent { @ViewChild(CdkVirtualScrollViewport) public viewPort: CdkVirtualScrollViewport; ... }AppComponentTemplate con paso de referencia de plantilla de ListComponent:
<p>Start editing to see some magic happen :)</p> <input #inputText /> <button #addButton (click)="addItem(list)">Add New</button> <list-container #list [data]="favoriteList" (removeData)="remove($event)"> </list-container>Componente de aplicación-> addItem():
addItem(listComp: ListComponent) { const newItem = { id: Number(this.input.nativeElement.value) + 1, title: `item ${Number(this.input.nativeElement.value) + 1}`, }; this.favoriteList = [newItem, ...this.favoriteList]; listComp.viewPort.scrollToIndex(0, 'smooth'); }StackBlitz para la segunda solución:
https://stackblitz.com/edit/angular-ivy-ofhubv?file=src/app/app.component.html