Angular 2路由问题

我为我的后端服务使用dropwizard，为我的webapp使用angular 2。Angular 2路由问题

我正在尝试调出详细信息页时正面临角度路由问题。我可以调出主页面（这是MasterComponent页面）。从MasterComponent页面，用户可以点击一行来调用DetailsComponent页面。当我点击该行以获取详细信息时，我会为此问题获得一个HTTP 404。

我不清楚角度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>

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

来源

2017-08-01 megan

我猜你应该使用'this.router.navigate（[“细节”]）;' –

但我需要打开一个新的弹出窗口与路由器的状态。我可以在上面做同样的事吗？ – megan

你需要使用模态。你有没有暴徒？ –

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

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

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

如果你仍然想移动用户到下一个窗口。如果你需要使用一个模式“弹出”您可以使用

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

来源

2017-08-01 16:46:55

谢谢Pankaj，我怎样才能得到一个弹出窗口打开上述？我不清楚这是否可能。请参阅我的onRowClick上面的MasterComponent – megan

看看更新的答案 –

尝试实施引导模式...下面链接。

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

来源

2017-08-01 18:28:11

感谢链接本！ – megan

Angular 2路由问题

回答

相关问题