Angular 路由器 link returns 返回发件人

Question

我正在构建一个简单的登录页面，一旦用户登录就会转到主页。我只处理了登录组件的 html 部分，而没有在 ts 文件中添加任何代码.我的login.component.html文件如下：

<form class="form-container">
  <h4 style="text-align: center;">LOG IN</h4>
  <hr>
  <div class="form-group">
    <label for="username">Username</label>
    <input type="text" class="form-control" id="username" placeholder="Username">
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" id="password" placeholder="Password">
  </div>
  <div>
    <button class="btn btn-link" [routerLink]="['/authentication/forgot-password']">Forgot password?</button>
    <button type="submit" class="btn btn-primary" style="float: right;" [routerLink]="['/home/dashboard']">Log in</button>  
  </div>
  <hr>
  <span class="text" style="text-align: center;"><p>Don't have an account? <a class="link-text" [routerLink]="['/authentication/signup']">Sign up</a></p></span>
</form>

每当我单击“登录”按钮时，我都希望路由器将我移动到 /home/dashboard 而无需执行任何操作，因为我没有指定任何操作。然而，在我单击按钮的那一刻，路由器迅速移动到 /home/dashboard 并足够快地 returns 返回登录页面。我该如何解决这个问题？

编辑：我已按如下方式配置我的路线。首先在app-routing.module.ts文件中-

const routes: Routes = [
  {
    path: 'authentication',
    loadChildren: () => import('./modules/authentication/authentication.module').then(m => m.AuthenticationModule)
  },
  {
    path: 'home',
    loadChildren: () => import('./modules/home/home.module').then(m => m.HomeModule)
  },
  { 
    path: '**', //If path doesn't match anything reroute to /authentication/signin
    redirectTo: '/authentication/signin', 
    pathMatch: 'full' 
  }
];

然后在 Authentication 和 Home 模块各自的模块文件中：

authentication.module.ts:

export const authenticationRoutes = [
  {
    path: 'signin',
    component: SigninComponent
  },
  {
    path: 'signup',
    component: SignupComponent,
  },
  {
    path: 'forgot-password',
    component: ForgotPasswordComponent
  }
];

@NgModule({
  declarations: [
    SigninComponent,
    SignupComponent,
    ForgotPasswordComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(authenticationRoutes)
  ]
})
export class AuthenticationModule { }

home.module.ts

export const homeRoutes = [
  {
    path: 'dashboard',
    component: HomeComponent
  }
];

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule.forChild(homeRoutes)
  ]
})
export class HomeModule { }

Answer 1

谢天谢地，这个问题的答案很简单。我只需要将登录按钮的类型从“提交”更改为“按钮”即可。

Angular 路由器 link returns 返回发件人

Angular router link returns back to sender

html

angular

angular-router