0

I do an Angular app using Angular7, and i try to use two "router-outlet" tag, For example I have two components "main" and "main2", that are halfly the same, they are routed in a parent component, and I want to route their differences in two 'children component, is it possible ? have you any way to explore ? Thanks ;)

iti
  • 25
  • 7

2 Answers2

0

Well, if I understand your questions very well. It is very possible as a case where you have login and dashboard, for instance

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 {}

With every component imported and correct path referencing

Abdulkabir Ojulari
  • 1,407
  • 7
  • 14
  • Thanks a lot, I found another way before you awnser but your solution look interesting to me, how to use the children part? Where do the children component will appear? is there any "router-children" tag or something ? – iti Jul 05 '19 at 09:37
  • No, just a will enable it and it will appear where it is being referenced – Abdulkabir Ojulari Jul 06 '19 at 08:32
0

For those who has the same problem as me, I use a "main" component and a "auth" component. The "main" component contain the "router-outlet" tag and my "auth" component contain my login view. In my app.componnt.html, I just use 

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

With that method, any user who want to access to a particulary path will not be redirect to an auth view and will keep the path he want to access.

iti
  • 25
  • 7