Angular 6 - Найти конкретный элемент шаблона после маршрутизации - PullRequest
Новая
       5

Angular 6 - Найти конкретный элемент шаблона после маршрутизации

0 голосов
/ 26 февраля 2019

Я относительно новичок в 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() со следующим фильтром?

...