Обновить все маршруты компонентов - PullRequest
Новая
       25

Обновить все маршруты компонентов

0 голосов
/ 02 января 2019

Я хотел сделать угловой сайт 7 отзывчивым.У меня есть два очень разных макета, и вместо того, чтобы скрывать весь этот ненужный HTML с помощью CSS Media Queries, я создал два компонента, соответствующие более крупной версии для настольных компьютеров и версии для мобильных телефонов и небольших дисплеев.Итак, я сделал две разные маршрутизации: 

const dekstop: Routes = [
    {
        path: '',
        component: HomePageComponent
    },
    ...
];

const mobile: Routes = [
    {
        path: '',
        component: MobileHomePageComponent
    },
   ...
];

В настоящее время я изменяю их при загрузке и событии изменения размера: 

@NgModule({
    imports: [RouterModule.forRoot(dekstop)],
    exports: [RouterModule]
})

export class AppRoutingModule {

    mobileConfigured = false;

    public constructor(private router: Router,
                       private device: DeviceService) {

        if (device.isMobile()) {
            router.resetConfig(mobile);
            this.mobileConfigured = true;
        }

        window.onresize = () => {

            if (this.mobileConfigured && !this.device.isMobile()) {
                window.location.reload();
                return;
            }

            if (this.device.isMobile() && !this.mobileConfigured) {
                window.location.reload();
            }
        };
    }
}

Но этот метод неэффективен, поскольку он перезагружает страницу при изменении компонентов,Есть ли способ, которым я могу перезагрузить их без перезагрузки всей страницы?

1 Ответ

0 голосов
/ 02 января 2019

Я получил его, выполнив 

@NgModule({
    imports: [RouterModule.forRoot(desktop, {onSameUrlNavigation: 'reload'})],
    exports: [RouterModule]
})

и позже обманув его: 

this.router.navigate([this.router.url]);
...