angular4 路由没有保持刷新

标签 angular angular-cli typescript2.0 angular4-router

当重新加载页面(F5 或在地址栏中输入 url)时,不会保留当前路径。我有两个独立的模块,主应用程序模块和仪表板模块。这些模块每个都有自己导入的路由模块。如果我导航到 http://localhost它重定向到 http://localhost/dashboard/overview但如果我通过地址栏导航到任何其他路线,它会重定向回 http://localhost/dashboard/overview

点击使用路由链接的页面上的任何链接都可以正常工作。

我正在使用最新的 angular 4 和最新的 angular-cli。它在从 Angular 2 更新到 Angular 4 之前工作。

以前版本的库:

"@angular/core": "^2.3.1",
"@angular/router": "^3.3.1",

库的当前版本:

"@angular/core": "^4.0.0",
"@angular/router": "^4.0.0",

应用路由.module.ts

const routes: Routes = [
  {
    path: '',
    redirectTo: '/dashboard/overview',
    pathMatch: 'full'
  },
  {path: 'logs', component: LogsComponent},
  {path: 'search', component: SearchComponent},
  {path: 'metrics', component: MetricsComponent}
];

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

dashboard-routing.module.ts

const dashboardRoutes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      {path: 'overview', component: OverviewComponent},
      {path: 'partition/:type', component: DashboardPartitionComponent},
      {path: 'latency', component: DashboardLatencyComponent},
    ]
  }
];

@NgModule({
  imports: [ RouterModule.forChild(dashboardRoutes)],
  exports: [ RouterModule ]
})
export class DashboardRoutingModule {}

编辑:

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}

最佳答案

原来我有一个调用会劫持路由器并重定向以注入(inject)参数。在更新之前 this.router.url 将返回正确的 url。现在由于某种原因它总是返回 root。

关于angular4 路由没有保持刷新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43124777/

相关文章:

angular - npm install 没有一个好的错误就被杀死了

angular - 将节点模块导入 Angular typescript /Angular cli的正确方法是什么

angular - 垫卡,如何更改默认填充

angular - 如何在 Angular 7 中配置 Autoprefixer

node.js - 一饮而尽 : Cannot delete files outside the current working directory

Angular Cli 工作区之外的 Angular 库

node.js - 使用 TypeScript 向现有类型添加属性

visual-studio-2013 - TypeScript 2.0 会支持 VS 2013 吗?

angular - 将 D3 v4 正确安装到 Angular2 中

javascript - 组合多个可管道化的 NgRx 选择器