Different routes for landing page and dashboard in Angular2

问题

I am developing a blog site with Angular 2. Now I want to show a signup/login form on landing page when user visit my site only signup form will show no menu or header.

Now when user logged in they will redirect to /dashboard and see the menus and header and content

Now how to start. Is it possible to use two router-outlets?

Signup layout image: http://prntscr.com/dwh1qg

Dashboard layout : http://prntscr.com/dwh2lp

回答1:

Each component can contain router-outlet.

I think that you should create App component which would contain routes to Dashboard component and Default component. In those components you should also put router-outlet and create different routes.

This way you can have different templates for each group of components.

@RouteConfig([
   { path: '/dahsboard/...', name: 'Dashboard', component: DashboardComponent },
   { path: '/...', name: 'Default', component: DefaultComponent }
])
export class AppComponent 

Your template for this component can be as simple as <router-outlet></router-outlet>.

Then your child components can have different routing and different templates.

@RouteConfig([
   { path: '/home', name: 'Home', component: HomeComponent },
   { path: '/sign-up', name: 'SignUp', component: SignupComponent }
])
export class DefaultComponent 

And it's template should also contain <router-outlet></router-outlet>.

来源：https://stackoverflow.com/questions/41684290/different-routes-for-landing-page-and-dashboard-in-angular2