Angular2路由器 - 如何在身份验证后推送导航?

时间:2016-01-31 06:52:37

标签: angular angular2-routing

我是Angular2路由的新手。我有一个用例,主页只有一个登录对话框。此页面上没有导航元素。当用户成功登录时,他们应该登陆主页面,该主页面具有导航到应用程序其他页面的选项卡。如何为此用例配置路由器?

修改

为了澄清,这是我的用例的页面结构:

     Home (Login) (/)
     /       |      \
  Page1    Page2    Page3
(/page1) (/page2)  (/page3)

主页上有导航。导航离开主页的唯一方法是成功登录。这应该会带您到Page1。第1,2和2页3在顶部显示一个标签栏,用于在它们之间导航。

我查看了Angular2文档中的example。那里的应用程序直接从Page1,Page2级别开始。应用程序启动后,导航栏即可显示。它位于应用级别app.component.ts

所以我的问题是:如何实现上面显示的页面结构?如何构建代码和组件来实现这一目标?我猜测应用程序组件只有一个路由器插座是空白的,路径/将我带到主页:

@Component({
  template:  `
    <router-outlet></router-outlet>
  `,
  directives: [RouterOutlet]
})
@RouteConfig([
  {path:'/',         name: 'Home',  component: HomeComponent, useAsDefault: true},
  {path:'/page1',    name: 'Page1', component: Page1Component},
  {path:'/page2',    name: 'Page2', component: Page2Component},
  {path:'/page3',    name: 'Page3', component: Page3Component}
])

路由/page1/page2等将我带到经过身份验证的网页。这些页面中的每一个都包含一个公共导航栏组件。这种方法看起来不错吗?

2 个答案:

答案 0 :(得分:1)

您可以使用window.location.href更改此路线:

window.location.href = '/create/team-name?email=' + email;

答案 1 :(得分:0)

回答我自己的问题!我在编辑部分中列出的方法就像一个魅力。应用程序组件几乎是空白的,只有一个路由器插座。路径/将我带到主页。