html - RouterLink 似乎大多数时候只是重新加载当前页面

Question

我已经使用路由器链接在我的网络应用程序中添加了页面导航，出于某种原因，该页面大部分时间只是重新加载，而在其他时候它工作正常，非常随机。

我很困惑，尤其是为什么它会随机工作。任何见解都会有所帮助。

相关代码:

应用程序路由.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 { }

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>

应用程序模块.ts:

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 { }

也没有控制台错误。

Answer 1

routerLink应用于 a 的指令元素设置一个 href此元素的属性。

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

尝试在页面重新加载后保留控制台日志，错误应该在那里。

如果错误仍然存​​在，请尝试更改 <a> tag至 <button> tag并检查。