Question

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

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

谢谢您的帮助！

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'
          }
    }

没有父级路由的Angular 7子级组件路由

1 个答案: