Question

我是Angular的新手，我面临一个棘手的问题。

我需要滚动到列表中的特定项目（如果存在）。列表和项目鉴别符都是组件的@Input()属性。

第一次加载后，我可以使用AfterViewInit钩子滚动到右边的项目。

相反，如果用户在不卸载组件的情况下执行导航，则在OnChanges钩子上调用相同的函数将不起作用，因为过滤的项目仍是前一个。

这是我的代码：

@Component({
    selector: 'my-component',
    templateUrl: `<div #list>
           <div *ngFor="let item of items" [class.item-focused]="item?.id == selected"></div>
        </div>`
})
export class MyComponent implements OnChanges, AfterViewInit {
    @Input('items') items: any[];
    @Input('selected') selected: string;

    @ViewChild("list") list: ElementRef;

    ngOnChanges() {
        this.setScrollPosition();
    }

    ngAfterViewInit() {
        this.setScrollPosition();
    }

    private setScrollPosition() {
        const element = this.list.nativeElement;
        const itemFocused = element.querySelector('.item-focused');
        if (itemFocused) {
            itemFocused.scrollIntoView(true);
        }
        else {
            window.scrollTo(0, 0);
        }
    }
}

有任何线索吗？除了将@ViewChild()与后面的过滤器一起使用之外，还有更好的方法来执行类似的操作吗？

Angular 6-路由后查找特定的模板元素

0 个答案: