Question

我使用dropwizard作为后端服务，使用angular 2作为我的webapp。

我正在尝试调出详细信息页面时遇到角度路由问题。我能够调出主页面（MasterComponent页面）。在MasterComponent页面中，用户可以单击将调用DetailsComponent页面的行。当我点击该行以获取详细信息时，我会收到针对此问题的HTTP 404。

我不清楚角度网址应该如何显示，以便能够调用详细信息页面？

HTTP错误我

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

在我的dropwizard应用程序中，我正在提供静态资产，如下所示

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

这些是我的角度路线

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文件中，我指定了deployUrl": "dashboard/"属性，该属性在运行ng build命令时映射index.html中的路径。

Answer 1

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

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

为什么要将用户从屏幕移开？您可以直接将用户导航到detail页面，也可以打开模态窗口。

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

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

Answer 2

如果你需要使用模态“弹出”，请尝试在下面实现一个Bootstrap模式...链接。

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

Angular 2路由问题

2 个答案: