Angular2中登录页面和仪表板的不同路线 [英] Different routes for landing page and dashboard in Angular2

问题描述

我正在使用Angular 2开发一个博客网站。
现在，我想在用户访问我的网站时在登录页面上显示一个注册/登录表单，只有注册表单不会显示菜单或标题。

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.

现在，当用户登录时，他们将重定向到/ dashboard并查看菜单，标题和内容

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?

注册布局图片： http://prntscr.com/dwh1qg

仪表板布局： http：// prntscr。 com / dwh2lp

推荐答案

每个组件都可以包含路由器出口。

Each component can contain router-outlet.

我认为您应该创建 App 组件，其中应包含到 Dashboard 组件和<$ c的路由$ c>默认组件。在这些组件中，您还应该放置路由器出口并创建不同的路由。

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 

该组件的模板可以很简单，就像< router-outlet>< / router-outlet> 。

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 

而且它的模板还应该包含< router-outlet>< / router-outlet> ; 。

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

这篇关于Angular2中登录页面和仪表板的不同路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！