Angular 2路由问题答案

【问题标题】：Angular 2 routing issueAngular 2路由问题
【发布时间】：2017-08-01 16:41:28
【问题描述】：

我将 dropwizard 用于我的后端服务，并将 angular 2 用于我的 webapp。

我目前在尝试打开详细信息页面时遇到角度路由问题。我能够调出主页（即 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"));

这些是我的角度路线

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 中的路径。

【问题讨论】：

我猜你应该使用this.router.navigate(['detail']);
但是我需要打开一个带有路由器状态的新弹出窗口。我可以对上面做同样的事情吗？
你需要使用 modal 。你有笨蛋吗？

标签： angular angular-routing

【解决方案1】：

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

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

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

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

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

【讨论】：

谢谢Pankaj，我怎样才能用上面的方法打开一个弹出窗口？我不清楚这是否可能。请在 MasterComponent 中查看我上面的 onRowClick

【解决方案2】：

如果您需要使用模态“弹出窗口”，请尝试实现 Bootstrap 模态...链接如下。

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

【讨论】：

感谢本链接！