子组件激活时更改路由

Question

我想做一个带有密码重置页面的登录页面。在页面中，当我点击“重置密码”时，只有一小部分页面会发生变化，因此视图将如下所示：

登录页面：

<div class="container">
   <div *ngIf="route is login">
      <login-component></login-component>
   </div>
   <div *ngIf="route is password forget">
      <password-forget-component></password-forget-component>
   </div>
</div>

当我点击忘记密码按钮时，我希望网址从“/login”更改为“/login/forgot-password”。但它在同一个组件中，我不知道该怎么做......

我认为在 component.ts 中我必须监听 ActivatedRoute，检查路由是否为 /login/forgot-password，如果是，则使状态像 this.state = 'password-forgot' （如果路由为 /登录状态将是 this.state = 'login')，但这只是一种直觉。

如果您有更好的方法，那就太好了，谢谢

奖励：如果我可以在过渡动画中更改视图！

Answer 1

在这种情况下，我将使用

router-outlet

并依赖 Angular 路由。

LoginPageComponent

- 假设该组件包含所有不会改变的公共部分。它还具有用于该部分的路由器插座。

<div class="container">
   <router-outlet></router-outlet>
</div>

// in routing config

[
  // Other routes
  //... 
  {
    path: 'login',
    component: LoginPageComponent,
    children: [
      {
        path: '',
        component: LoginComponent
      },
      {
        path: 'forgot-password',
        component: PasswordForgetComponent
      },
    ]
  }
]

这假设您在同一级别上没有另一个

router-outlet

。 如果这样做，您可能需要使用命名路由器插座。

希望有帮助:)