具有嵌套状态的Angular2路由

Question

I have a landing page that will present the user (by default) and "Sign Up" component which is a set of input fields to allow them to register. 我有一个登陆页面，它将显示用户（默认情况下）和“注册”组件，这是一组允许他们注册的输入字段。

For returning users, I would want them to see the landing page as is, then click "Log In" and just replace the registration component with a login component. 对于返回用户，我希望他们按原样查看登录页面，然后单击“登录”，只需用登录组件替换注册组件。 I do not want the URL to change, it should remain '/'. 我不希望URL改变，它应该保持'/'。

For ui-router I could do nested states, but not sure if Angular2's router supports that yet? 对于ui-router我可以做嵌套状态，但不确定Angular2的路由器是否支持呢？

app.ts app.ts

@Component({
  selector: 'app',
  template: '
    *snip*
    <router-outlet></router-outlet>
    *snip*
  ',
  directives: [Footer, ROUTER_DIRECTIVES]
})
@RouteConfig([
  { path: '/...', name: 'Landing', component: LandingComponent, useAsDefault: true },
  { path: '/about', name 'About', component: AboutComponent }
]);

landing.ts landing.ts

@Component({
  selector: 'landing',
  template: '
    <body>
      <div>
        <router-outlet></router-outlet>
      </div>
    </body>',
  directives: [ROUTER_DIRECTIVES]

})
@RouteConfig([
  { path: '/', name: 'RegisterForm', component: RegisterForm, useAsDefault: true },
  { path: '/login', name: 'LoginForm', component: LoginForm },
])

Do the paths for the landing component need to be different? 着陆组件的路径是否需要不同？

Answer 1

Why do you need to use the route at all then? 为什么你需要使用这条路线呢？ Can't you just bind to a boolean that hides or shows the appropriate section? 你不能只绑定到隐藏或显示相应部分的布尔值吗？

<div *ngIf="showReg">Registration</div>

<div *ngIf="!showReg">Login</div>

具有嵌套状态的Angular2路由

问题描述

1 个解决方案

解决方案1
-2 已采纳 2016-01-02 21:07:00

具有嵌套状态的Angular2路由

问题描述

1 个解决方案

解决方案1 -2 已采纳 2016-01-02 21:07:00

解决方案1
-2 已采纳 2016-01-02 21:07:00