Html RouterLink似乎大部分时间只是重新加载当前页面

我使用RouterLink在我的webapp中添加了页面导航，出于某种原因，页面大部分时间只是重新加载，而在其他时间，它工作正常，非常随机

我被难住了，尤其是为什么它是随机工作的。任何洞察都会有所帮助

相关代码：

app-routing.module.ts：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { ProfileComponent } from './views/profile/profile.component';
import { PwSetupComponent } from './views/pw-setup/pw-setup.component';
import { ChangePwComponent } from './views/change-pw/change-pw.component';
import { EditProfileComponent } from './views/edit-profile/edit-profile.component';


const routes: Routes = [
  {path: '',   redirectTo: 'pwSetup', pathMatch: 'full'},
  {path: 'pwSetup', component: PwSetupComponent},
  {path: 'profile', component: ProfileComponent},
  {path: 'changePw', component: ChangePwComponent},
  {path: 'editProfile', component: EditProfileComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { MatButtonModule, MatNativeDateModule, MatIconModule, MatSidenavModule, MatListModule, MatToolbarModule} from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SideNavComponent } from './components/side-nav/side-nav.component';
import { AvatarModule } from 'ngx-avatar';
import { HttpClientModule } from '@angular/common/http';
import { MatTableModule } from '@angular/material/table';
import { RightNavComponent } from './components/right-nav/right-nav.component';
import { HighchartsChartComponent } from 'highcharts-angular';
import { ProfileComponent } from './views/profile/profile.component';
import { PwSetupComponent } from './views/pw-setup/pw-setup.component';
import { ChangePwComponent } from './views/change-pw/change-pw.component';
import { EditProfileComponent } from './views/edit-profile/edit-profile.component';


@NgModule({
  declarations: [
    AppComponent,
    SideNavComponent,
    RightNavComponent,
    HighchartsChartComponent,
    ProfileComponent,
    PwSetupComponent,
    ChangePwComponent,
    EditProfileComponent

  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    MatButtonModule,
    MatNativeDateModule,
    MatIconModule,
    MatSidenavModule,
    MatListModule,
    MatToolbarModule,
    AvatarModule,
    HttpClientModule,
    MatTableModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

pw-setup.component.html：

<div style="padding-top: 10px;padding-left:10px; ">
        <img src="./assets/img/og-favicon.png" width="50" height="50">
</div>
<div class="container-fluid outer-container" style="height:80%;min-height:550px;">

        <div class="row middle-container">
           <div class="col-s-12 container inner-container">

        <p >Lets set up your password</p>
        <form >
            <div class="form-group">
                <label for="username"  class="label1">EMAIL ADDRESS</label>
                <p>email@id.com</p>

            </div>
            <div class="form-group">
                    <label for="username"  class="label1">TEAM NAME</label>
                    <p>name of team</p>

                </div>
            <div class="form-group">
                <label for="password"  class="label1">PASSWORD</label>
                <input type="password" formControlName="password" class="form-control"  />

            </div>
            <div class="form-group">
                    <label for="password"  class="label1">CONFIRM PASSWORD</label>
                    <input type="password" formControlName="password" class="form-control"  />

            </div>
            <label class="label2"><input id="rememberme" name="rememberme" value="remember" type="checkbox" /> &nbsp;Remember me</label>
            <div class="form-group">
                <button  mat-flat-button class="blue-button">
                        <a [routerLink]="['/profile']" style="color: white; text-decoration: none;" >PROCEED</a>

                </button>


            </div>

        </form>
        <router-outlet></router-outlet>
        </div>
        </div>
        </div>

---

也没有控制台错误。

应用于

a

元素的

routerLink

指令在此元素上设置

href

属性。

我猜在单击时会引发相同的异常，但事件仍会冒泡，然后执行默认行为并更改页面位置。由于这种情况发生得非常快，您不会注意到错误。

尝试保留控制台日志，即使在重新分页之后，错误也应该存在

---

如果错误仍然存在，请尝试将

标记更改为
标记
并检查。
启用了保留日志，但仍然没有显示错误，当它不起作用时，我会得到“导航到？”尝试将
标记更改为
标记，并检查问题是否仍然存在或已解决。通过此操作，我们可以检查routerLink或
标记@BlackJackseems是否存在问题。要使其正常工作，routerLink已添加到
而不是
，谢谢。但是我仍然不明白为什么它不能与
标记一起工作。href属性的设置有什么问题？如果对您有帮助，请向上投票并接受@21点。参考我的答案，您将了解它有时无法与
a
标记一起使用的原因。href会自动添加到标记中，因为根据我的代码，它是一个空的href。但它仍然指向要导航到的正确页面。我的问题是，为什么它仍然会导致页面重新加载，这也只是偶尔发生的