Можно ли использовать два маршрута в угловых? - PullRequest
0 голосов
/ 04 июля 2019

Я создаю приложение Angular, используя Angular7, и пытаюсь использовать два тега «router-outlet». Например, у меня есть два компонента «main» и «main2», которые наполовину совпадают, они маршрутизируются в родительском элементе.компонент, и я хочу направить их различия в два дочерних компонента, это возможно?есть ли у вас способ исследовать?Спасибо;)

Ответы [ 2 ]

0 голосов
/ 05 июля 2019

Для тех, у кого такая же проблема, как у меня, я использую «основной» компонент и компонент «аутентификация».«Основной» компонент содержит тег «router-outlet», а мой компонент «auth» - мой вид входа в систему.В моем app.componnt.html я просто использую

<app-auth *ngIf="!isAuth"></app-auth>
<app-main *ngIf="isAuth"></app-main>

При использовании этого метода любой пользователь, который хочет получить доступ к определенному пути, не будет перенаправлен в представление авторизации и сохранит путь, к которому он хочет получить доступ.

0 голосов
/ 04 июля 2019

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

const routes: Routes = [
    {
        path: '',
        pathMatch: 'prefix',
        redirectTo: 'auth/login'
    },
    {
        path: 'loading',
        component: LoadingComponent
    },
    {
        path: 'auth/login',
        component: LoginComponent
    },
    {
        path: 'auth/forgot-password',
        component: ForgotPasswordComponent
    },
    {
        path: 'auth/register',
        component: RegisterComponent
    },
    {
        path: 'auth/reset-password-temp',
        component: ResetPasswordComponent
    },
    {
        path: 'dashboard',
        component: AdminComponent,
        canActivate: [AuthGuard],
        children: [
            {
                path: 'welcome',
                component: WelcomeComponent
            },
            {
                path: 'messages',
                canActivate: [AuthGuard],
                component: MessagesComponent
            },
            {
                path: 'student-add',
                component: StudentAddComponent
            },
            {
                path: 'student-edit',
                component: StudentEditComponent
            },
            {
                path: 'student-view',
                component: StudentViewComponent
            }

        ]
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes, { useHash: true })],
    exports: [RouterModule],
    providers: []
})
export class RoutingModule {}

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

...