Angular 7子组件路径，无父路径

Question

我的Angular 7应用程序中的路由存在问题。 我有一个页面框架，在这里我想根据路由切换到不同的组件，而无需刷新/更改主页面框架。 在我的页面框架中，有<router-outlet> 。 我的主要路线是http://localhost:4200/login 。

当我转到此页面时，我想显示与此路线相关的组件。 我想显示的第二条路线是http://localhost:4200/forgot-password 。 我想在完全相同的页面上看到与忘记密码形式有关的第二个组件。 我试图通过儿童实现这一点，并且可以正常工作，但是当我进行重定向时，它会在现有http://localhost:4200/login url的末尾添加/forgot-password 。 在这种情况下，我始终会在网址中收到http://localhost:4200/login/forgot-password 。 我想要实现的是在URL中显示http://localhost:4200/forgot-password ，而没有/login 。

app.routes.ts

// Login Page
    {
      path: 'login',
      component: LoginComponent,
      canActivate: [ HTTPSGuard ],
      children: [
        {
          path:'',
          component: Login2ComponentComponent,
          data: {
            animation: 'Sign-In'
          }
        },
        {
          path: 'forgot-password',
          component: ForgotPassword2Component,
          data: {
            animation: 'Forgot-Password'
          }
        }
      ]
    }

在我的登录组件中，我有一个链接： <a [routerLink]="['/forgot-password']">Go to forgot</a>

但这将我添加到当前的/login路径/forgot-password 。

也许我可以在app.routes.ts使用router属性来实现这一点？

谢谢你的帮助！

Answer 1

使用您的代码，您将ForgotPassword2Component设置为登录路由的子路由，因此应将代码更改为此

    {
      path: 'login',
      component: LoginComponent,
      canActivate: [ HTTPSGuard ],
      children: [
        {
          path:'',
          component: Login2ComponentComponent,
          data: {
            animation: 'Sign-In'
          }
        }
      ]
    },
    {
          path: 'forgot-password',
          component: ForgotPassword2Component,
          data: {
            animation: 'Forgot-Password'
          }
    }