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

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