具有嵌套状态的Angular2路由

时间:2016-01-02 17:26:02

标签: angular angular2-routing

我有一个登陆页面,它将显示用户(默认情况下)和“注册”组件,这是一组允许他们注册的输入字段。

对于返回用户,我希望他们按原样查看登录页面,然后单击“登录”,只需用登录组件替换注册组件即可。我不希望URL改变,它应该保留'/'。

对于ui-router我可以做嵌套状态,但不确定Angular2的路由器是否支持它呢?

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

@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 },
])

着陆组件的路径是否需要不同?

1 个答案:

答案 0 :(得分:-2)

为什么你需要一直使用这条路线?你不能只绑定到隐藏或显示相应部分的布尔值吗?

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

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