要禁止Angular删除列表中的对象时滚动到顶部,您可以使用scrollTop
属性来保存滚动位置,并在删除对象后将其还原回去。
以下是一个示例解决方案:
在组件的HTML模板中,您可以使用ngFor
指令来循环遍历列表,并在每个对象后面添加一个删除按钮。当点击删除按钮时,调用一个方法来删除对象:
{{ item.name }}
在组件的代码中,您需要使用@ViewChild
装饰器来获取容器元素的引用,并保存滚动位置。然后,在删除对象后,可以使用scrollTop
属性将滚动位置还原回去:
import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
selector: 'app-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.css']
})
export class ListComponent {
itemList = [
{ name: '对象1' },
{ name: '对象2' },
{ name: '对象3' },
{ name: '对象4' }
];
@ViewChild('containerElement') containerElement: ElementRef;
deleteItem(item: any) {
const scrollTop = this.containerElement.nativeElement.scrollTop;
const index = this.itemList.indexOf(item);
if (index > -1) {
this.itemList.splice(index, 1);
}
this.containerElement.nativeElement.scrollTop = scrollTop;
}
}
在示例代码中, 请注意,要正确使用@ViewChild('containerElement')
装饰器将containerElement
与模板中的deleteItem
方法中,我们首先保存了当前的滚动位置,然后删除了对象,最后将滚动位置还原回去。
@ViewChild
装饰器,您需要从@angular/core
中导入ElementRef
。相关内容