Angular 2 路由问题

Question

我正在为我的后端服务使用 dropwizard，为我的网络应用程序使用 angular 2。

我目前在尝试调出详细信息页面时遇到 angular 路由问题。我能够调出主页（即 MasterComponent 页面）。在 MasterComponent 页面中，用户可以单击将调用 DetailsComponent 页面的行。当我单击该行以查看详细信息时，我收到了此问题的 HTTP 404。

我不清楚 angular URL 应该如何显示才能调用详细信息页面？

我收到 HTTP 错误

GET http://localhost:8199/detail 404 (Not Found)

在我的 dropwizard 应用程序中，我提供如下静态资源

bootstrap.addBundle(new AssetsBundle("/static", "/dashboard", "index.html", "static-assets"));

这些是我的 angular 路线

const routes: Routes = [
  {path: '', redirectTo: '/dashboard', pathMatch: 'full'},
  {path: 'dashboard', component: DashboardComponent},
  {path: 'master', component: MasterComponent},
  {path: 'detail', component: DetailComponent}
  ];

在我的主组件中，我指定以下内容以导航到详细信息页面

onRowClick(event) {
    window.open('./detail','_self' );
  }

下面是我的index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<dashboard-app></dashboard-app>
<script type="text/javascript" src="dashboard/inline.bundle.js"></script>
<script type="text/javascript" src="dashboard/polyfills.bundle.js"></script>
<script type="text/javascript" src="dashboard/styles.bundle.js">/script>
<script type="text/javascript" src="dashboard/vendor.bundle.js">/script>
<script type="text/javascript" src="dashboard/main.bundle.js"></script>
</body>
</html>

在我的 angular-cli.json 文件中，当我运行 ng build 命令时，我指定了 index.html 映射路径的 deployUrl": "dashboard/" 属性。

Answer 1

您不应该使用 window.open 在 SPA 中导航。

this.router.navigate(['detail'])
//OR
this.router.navigateByUrl('/detail')

为什么要让用户远离屏幕？您可以直接将用户导航到 detail 页面或打开模式 window。

如果您仍想将用户移至下一个 window，您可以使用

window.open('/detail', '_blank')

Answer 2

如果您需要使用模态 "pop-up" 尝试实现 Bootstrap 模态... link 下面。

https://www.w3schools.com/bootstrap/bootstrap_modal.asp

Angular 2 路由问题

Angular 2 routing issue

angular-routing

angular