大多数时候，路由器链接似乎只是重新加载当前页面

Question

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

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

相关代码：

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

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>[e-mail]</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>

app.module.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

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

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

尝试保留控制台日志，即使在页面重新生成后，错误也应该存在。

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