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

【问题标题】：Angular 5 <a routerLink> press causes unwanted refreshAngular 5 <a routerLink> 按下会导致不必要的刷新
【发布时间】：2018-03-13 05:57:32
【问题描述】：

当单击带有 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

【问题讨论】：

您的 routerLink 位于内联样式中。可能的原因？

标签： angular typescript angular5 angular-routing

【解决方案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>

【讨论】：

修复它，不幸的是它没有帮助
@uribaum - 也许还有其他错误。例如，您的解释表明路由发生并且页面在路由加载后刷新。目标组件中是否有某些内容，或者是否还有一些事件代码与 a 标记上的 window.location 或 href 执行某些操作？

【解决方案2】：

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

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

改变了：

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

到：

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

【讨论】：