7-компонентный угловой маршрут без родительского маршрута - PullRequest
Новая
       19

7-компонентный угловой маршрут без родительского маршрута

0 голосов
/ 23 мая 2019

У меня проблема с маршрутами в приложении Angular 7. У меня есть фрейм страницы, где я хотел бы переключиться на различные компоненты в соответствии с маршрутом без обновления / изменения фрейма главной страницы. В моей странице страницы у меня есть <router-outlet>. Мой основной маршрут http://localhost:4200/login.

Когда я иду на эту страницу, я хотел бы показать компонент, который связан с этим маршрутом. Мой второй маршрут, который я хотел бы показать, это http://localhost:4200/forgot-password. Я хотел бы видеть на той же странице второй компонент, который связан с формой забытого пароля. Я пытался добиться этого с детьми, и это работает, но когда я делаю перенаправление, он добавляет /forgot-password в конце существующего http://localhost:4200/login URL. В этом случае я всегда получаю http://localhost:4200/login/forgot-password в URL. Чего я пытаюсь добиться, так это показать в 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, чтобы это произошло?

Спасибо за помощь!

1 Ответ

0 голосов
/ 23 мая 2019

С вашим кодом вы установили, что ForgotPassword2Component становится суб-маршрутом маршрута входа в систему, поэтому вы должны изменить свой код на 

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