Прокрутите вверх и титульный сервис не работает параллельно в угловых 6

Question

this.document.body.scrollTop = 0;
        this.router.routeReuseStrategy.shouldReuseRoute = function() {
            return false;
        };

    /* Activated change detection for the title change */
    this.router.events
        .filter((event) => event instanceof NavigationEnd)
        .map(() => this.activatedRoute)
        .map((route) => {
            while (route.firstChild) {
                route = route.firstChild;
            }
            return route;
        })
        .filter((route) => route.outlet === 'primary')
        .mergeMap((route) => route.data)
        .subscribe((event) => {
            this.titleService.setTitle(event['title']);
            this.metaService.addTag(event['meta']);
        });

Я использую маршрутизатор для обновления заголовка и метаданных, используя службу заголовка в компоненте приложения

const appRoutes: Routes = [
    {
        path: '',
        loadChildren: './main/pages/pages.module#PagesModule',
        data: {
            title: 'Home Page',
            meta: {name: 'description', content: 'hello its home'}
        }
    },
    {
        path: '**',
        redirectTo: '/you-know-nothing-jon-snow'
    }
];

Также мне нужно использовать прокрутку вверх для нескольких динамических страниц URL для прокрутки вверхна каждый клик.Если я удаляю routeReuseStrategy, setTitle работает и устанавливаю заголовок с помощью маршрутизатора, оба не работают вместе, я связал другие параметры, но ни один из них не работал, как ожидалось, ни для одного из них для приложения.Есть ли способ заставить их работать вместе?

Answer 1

Это взлом, но вы можете попробовать использовать setTimeout:

.subscribe((event) => {
        this.titleService.setTitle(event['title']);
        this.metaService.addTag(event['meta']);
        setTimeout(() => this.document.body.scrollTop = 0);
    });

Кстати, вы также можете использовать window.scrollTo для анимации прокрутки (может также решить вашу проблему)

window.scrollTo({ top: 0, behavior: "smooth" });