Angular 6 Router - не работает маршрутизация детей - PullRequest
Новая
       19

Angular 6 Router - не работает маршрутизация детей

0 голосов
/ 01 ноября 2018

У меня есть основной маршрутизатор следующим образом: 

export const routes: Routes = [
    {
        path: '',
        pathMatch: 'full',
        redirectTo: "login",
    },
    {
        path: 'login',
        loadChildren: './modules/login/login.module#LoginModule',
    }
}

, который хорошо маршрутизирует корневой домен в мой модуль входа в систему.

в LoginModule У меня есть другой маршрутизатор (login.routes), структурированный таким образом: 

export const router: Routes = [
    {
        path: '',
        component: LoginComponent,
        children: [
            {
                path: '',
                component: LoginPanelComponent,
                outlet: 'login'
            },
            {
                path:'change_password',
                component: ChangePasswordPanelComponent,
                outlet: 'login'
            }
       ]
    }
}

в login.component.html У меня есть дополнительный маршрутизатор-розетка с именем 'login' 

<div class="login-component-wrapper">
    <router-outlet name="login"></router-outlet>
</div>

сейчас:

когда я вызываю root, domanin (www.mysite.com) роутер работает хорошо, браузер перенаправляется на www.mysite.com/login и называется страницей LoginPanelComponent, но если я звоню www.mysite.com/login/change_password, я получаю «страницу не найдена» от роутера ,

Я нашел решение, но я думаю, что не так чисто 

export const router: Routes = [
    {
        path: '',
        component: LoginComponent,
        children: [
            {
                path: '',
                component: LoginPanelComponent,
                outlet: 'login'
            }
        ]
    },
    {
        path: 'change_password',
        component: LoginComponent,
        children: [
            {
                path:'',
                component: ChangePasswordPanelComponent,
                outlet: 'login'
            }
        ]
    }
];

таким образом, маршрутизация работает хорошо, но я думаю, что это не лучшее решение, оно имеет избыточную часть (часть LoginComponent)

есть другой способ, например, первый неработающий пример для обработки?

1 Ответ

0 голосов
/ 01 ноября 2018

Ваш порядок маршрутов испорчен, и маршрутизатор не может разрешить URL:

Базовые маршруты 

export const routes: Routes = [
    {
        path: 'login',
        loadChildren: './modules/login/login.module#LoginModule',
    },
    {
        path: '',
        pathMatch: 'full',
        redirectTo: "login",
    }
}

Маршруты входа в систему 

export const router: Routes = [
    {
        path: '',
        component: LoginComponent,
        children: [
            {
                path:'change_password',
                component: ChangePasswordPanelComponent,
                outlet: 'login'
            },
            {
                path: '',
                component: LoginPanelComponent,
                outlet: 'login'
            }
       ]
    }
}
...