Angular 5 маршрутизатор ссылка NaN - PullRequest
Новая
       11

Angular 5 маршрутизатор ссылка NaN

0 голосов
/ 03 июля 2018

У меня есть этот файл маршрутизатора в угловых 5: 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login.component';
import { ForgotPasswordComponent } from './forgot-password/forgot-password.component';
const routes: Routes = [
  {
    path:'login',
    component: LoginComponent,

  },
  {
    path:'forgotpassword',
    component: ForgotPasswordComponent,

  },
  {
    path: '',
    component: LoginComponent,
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  providers: []
})
export class LoginRoutingModule { }

А вот мои компоненты html: 

<div class="container">

  <div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
    <div class="panel panel-info">
      <div class="panel-heading">
        <div class="panel-title">Sign In</div>
        <div style="float:right; font-size: 80%; position: relative; top:-10px">
          <a [routerLink]="login/forgotPassword">Forgot password?</a>
        </div>
      </div>

      <div style="padding-top:30px" class="panel-body">

        <div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>

        <form [formGroup]="loginForm">

          <div style="margin-bottom: 25px" class="input-group">
            <span class="input-group-addon">
              <i class="glyphicon glyphicon-user"></i>
            </span>
            <input id="username" formControlName="username" type="text" class="form-control" name="username" value="" placeholder="username or email"
              >
          </div>

          <div style="margin-bottom: 25px" class="input-group">
            <span class="input-group-addon">
              <i class="glyphicon glyphicon-lock"></i>
            </span>
            <input id="password" formControlName="password" type="password" class="form-control" name="password" placeholder="password">
          </div>
          <div class="input-group">

          </div>
          <div style="margin-top:10px" class="form-group">
            <!-- Button -->
            <div class="col-sm-12 controls">
              <button id="btn-login" [disabled]="!loginForm.valid" (click)='login()' class="btn btn-success">Login </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Когда я нажимаю на забытый пароль, я вижу ошибку:

ИСКЛЮЧЕНИЕ: Uncaught (в обещании): Ошибка: не может соответствовать ни один маршрут. URL Сегмент: «NaN» Ошибка: не удается сопоставить ни один маршрут. Сегмент URL: 'NaN'

Но когда я вхожу в URL-адрес нормально, он работает:

http://localhost:4200/login/forgotPassword

или

http://localhost:4200/forgotPassword

Этого также не должно произойти, так как я хочу, чтобы первый URL был действительным и переходил к компоненту забытых паролей только из компонента входа в систему.

Ответы [ 2 ]

0 голосов
/ 03 июля 2018

Попробуйте код ниже:

в модуле: 

 {
    path: 'login', component: LoginComponent,
    children: [
      { path: 'forgotPassword', component: ForgotPasswordComponent },
    ]
  }

и в HTML: 

[routerLink]='/login/forgotPassword'

OR 

routerLink='/login/forgotPassword'
0 голосов
/ 03 июля 2018

Сверните ваш маршрут в '', чтобы сделать его строкой. 

[routerLink]="'login/forgotPassword'"
              ^                    ^

или просто без []

routerLink="login/forgotPassword"
...