为什么使用重定向提交表单不起作用？

问：

我在 angular 16 中有这段代码：

<div class="position-absolute top-50 start-50 translate-middle">
<div class="text-center">
    <img id="logo" src="/assets/images/logo.jpg">
</div>
<div>
<form (submit)="login(username.value, password.value)">
    <div class="mb-3">
      <label for="exampleInputEmail1" class="form-label">Username</label>
      <input type="text" class="form-control" id="exampleInputEmail1" #username>
    </div>
    <div class="mb-3">
      <label for="exampleInputPassword1" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1" #password>
    </div>
    
    <input style="background-color: #007b32; border-color: #007b32;" type="submit" class="btn btn-primary" value="Accedi" >
</form>
</div>

login(username: string, password: string){
this.auth.login(username, password).subscribe({
  next: (response: any) =>{
    if(response["token"]){
      sessionStorage.setItem("Authorization", response["token"])
    }
    this.router.navigateByUrl("/index")
  },
  error: (msg) => {
    console.log(msg)
    
  }
});}

路由

const routes: Routes = [
      { path: "", redirectTo: "/index", pathMatch: "full" },
      { path: "login", component: LoginComponent, pathMatch: "prefix" },
      {
        path: "index",
        component: IndexComponent,
        canActivate: [IsAuthFilter],
        pathMatch: "prefix",
      },
      { path: "**", redirectTo: "/index", pathMatch: "full" },
    ];

现在，我的问题是，如果我使用输入类型 submit 并以这种方式调用方法 login（），则表单不会在 /index 上重定向，而是在同一页面上重定向。 此外，在调试中，它会重定向到“/index/”，但后来它会返回登录页面。

我不明白为什么。 我过去使用一个简单的按钮缓解了这个问题，但我不喜欢这种方式，我想使用表单。

也许我没有以正确的方式使用它？！

谢谢