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路由問題

回答

相關問題