使用角度2的儿童路线

Question

I am very much new to angular 2. I was trying to build a simple application with Login and Dashboard Pages. I need to understand how to apply the routing as my application needs.

Login page is an independent route config, but i want when use signed in, new new dashboard page comes with navigation bar and its own <router-outlet> .

const routes: Routes = [
    { path: '', redirectTo: 'login', pathMatch: 'full' },
    { path: 'login', component: LoginComponent },
    { path: 'register-user', component: RegisterUserComponent },
    //APPLICATION ROUTES WITH OWN <router-outlet>
    { path: '**', redirectTo: 'login' }
]

Earlier in angular 1, we have used ui-router with abstract state and child states.

Please suggest how we can accomplish that.

Answer 1

Working plunkr

https://plnkr.co/edit/MqNv6RyQvzsiZTp0Dkpf?p=preview

Create one ContainerComponent & it should hold its own router-outlet & routerLinks.

By default, always load to anyComponent using redirectTo

{ path: 'component-two', component: ComponentTwo,
    children: [
      { path: '', redirectTo: 'child-one', pathMatch: 'full' },
      { path: 'child-one', component: ChildOne },
      { path: 'child-two', component: ChildTwo }
    ]
  }

Answer 2

Suppose u have a submodule inside main module.
So App module and login sub module

directory structure of main Module

app.routing.module.ts something looks like this

export const routes: Routes = [
  { path: '', component:LoginComponent, pathMatch: 'full'},
   { path: Constants.LOGINROUTE, component:LoginComponent, pathMatch: 'full'}
  ];

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

and corresponding login.routing.module.ts

@NgModule({
  imports: [RouterModule.forChild([
    { path: Constants.LOGINROUTE, component: LoginComponent}
  ])],
  exports: [RouterModule]
})
export class LoginRoutingModule {}

and dashboard.routing.module.ts will look like this

@NgModule({
  imports: [RouterModule.forChild([
    { path: Constants.DASHBOARDROUTE,  component: DashboardComponent}
  ])],
  exports: [RouterModule]
})
export class DashboardRoutingModule {}

correspoding include login.routing.module.ts in the login.module.ts and same for dashboard.routing.module.ts

Answer 3

I have done this in my project.

This is used for lazy-loading for child route:

You should use loadChildren like this in your main app-routing.module.ts :

{ path: 'crisis-center',
  loadChildren: 'app/modules/crisis-center/crisis.module#CrisisCenterModule'
 },   

And then remove component from your app-module.ts file in below code :

app.module.ts :

@NgModule({
      imports: [ RouterModule.forRoot(routes, { useHash: true })
        // ,AdminModule 
       ],
      declarations: [ ],
      providers: [ ],
      bootstrap: [ AppComponent ]
    })

app-routing.module.ts:

export const routes: Routes = [
  { path:  'dashboard',                  component: DashboardComponent },
  { path: 'admin',
    loadChildren: 'app/admin/admin.module#AdminModule'
  },
  { path: 'crisis-center',
    loadChildren: 'app/modules/crisis-center/crisis.module#CrisisCenterModule'
  },
  { path:  '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path:  '**',                         component: PageNotFound},

];

Now fine.When the router navigates to this route, it uses the loadChildren string to dynamically load the AdminModule . Then it adds the AdminModule routes to its current route configuration. Finally, it loads the requested route to the destination admin component.

You can also use this ( children[ ] ) in your routing file and can give separate component for each child routes:

const crisisCenterRoutes: Routes = [
  {
    path: '',
    component: CrisisCenterComponent,
    children: [
      {
        path: '',
        component: CrisisListComponent,
        children: [
          {
            path: ':id',
            component: CrisisDetailComponent,
            canDeactivate: [CanDeactivateGuard]
          },
          {
            path: '',
            component: CrisisCenterHomeComponent
          }
        ]
      }
    ]
  }
];

And then add all the components into your particular module.ts file , like this:

import { NgModule                   }       from '@angular/core';
import { CommonModule               }       from '@angular/common';
import { FormsModule                }       from '@angular/forms';
import { CrisisCenterRoutingModule  }       from './crisis-center-routing.module';
import { CrisisCenterComponent      }       from './crisis-center.component';
import { CrisisListComponent        }       from './crisis-list.component';
import { CrisisDetailComponent      }       from './crisis-detail.component';
import { CrisisCenterHomeComponent  }       from './crisis-center-home.component';
import { CrisisService              }       from './crisis.service';

 @NgModule({
  imports: [ CommonModule,CrisisCenterRoutingModule,FormsModule, ],
  declarations: [CrisisCenterComponent ,CrisisListComponent,CrisisDetailComponent,CrisisCenterHomeComponent ],
  providers: [ CrisisService ],
})

export class CrisisCenterModule {}