Angular 5 <a routerLink> 按下会导致不必要的刷新

Question

当单击带有 routerLink 的锚标记时，路由器会成功导航到该路由，但随后会刷新页面。 Chrome 和 Edge 都会发生这种情况。

主播：

<a mat-raised-button color="primary" style="margin-left: 10px;[routerLink]=['/table']">some text</a>

routes.module.ts:

const appRoutes: Routes = [
  { path: "home", component: HomeComponent },
  { path: "content", component: ImageViewComponent },
  { path: "table", component: TableComponent },
  { path: "", redirectTo: "/home", pathMatch: "full" }
];

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

app.module.ts:

@NgModule({
  declarations: [

  ],
  imports: [
    BrowserModule,
    ServerModule,
    AppRoutingModule,
    FlexLayoutModule,
    MyOwnCustomMaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Angular 使用的 CLI 版本：1.7.3 Angular路由器版本：5.2.8

Answer 1

您的 style 属性包含您的 routerLink 属性，因为它包含在该属性值中。

<a mat-raised-button color="primary" style="margin-left: 10px;[routerLink]=['/table']">some text</a>

应该是

<a mat-raised-button color="primary" style="margin-left: 10px;" [routerLink]="['/table']">some text</a>

Answer 2

okey 我发现问题了，这是服务器模块的问题

当我删除它时，我的问题就解决了

已更改：

imports: [
  BrowserModule,
  ServerModule,
  AppRoutingModule,
  FlexLayoutModule,
  MyOwnCustomMaterialModule
],

至：

imports: [
  BrowserModule,
  BrowserAnimationsModule, <-- as a replacment
  AppRoutingModule,
  FlexLayoutModule,
  MyOwnCustomMaterialModule
],

Angular 5 <a routerLink> 按下会导致不必要的刷新

Angular 5 <a routerLink> press causes unwanted refresh

typescript

angular-routing

angular

angular5