Angular 5 <a routerlink=""> press causes unwanted refresh

时间:2018-03-12 17:35:17

标签: angular typescript angular5 angular-routing

When clicking on an anchor tag with a routerLink the router successfully navigates to the route but then refreshes the page. This happens on both Chrome and Edge.

The anchor:

<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 version used: 1.7.3 Angular router version: 5.2.8

2 个答案:

答案 0 :(得分:2)

您的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>

答案 1 :(得分:0)

okey我发现了问题,这是服务器模块的一个问题

当我删除它时,我的问题已解决

改变:

msg = new MailMessage();

为:

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