2017-08-01 2 views
1

Ich benutze Dropwizard für meine Back-End-Dienste und Winkel 2 für meine Webapp.Angular 2 Routing-Problem

Ich bin derzeit mit einem Problem mit eckigen Routing konfrontiert, während Sie versuchen, die Detailseite aufzurufen. Ich kann die Hauptseite (die MasterComponent-Seite) aufrufen. Auf der MasterComponent-Seite kann der Benutzer auf eine Zeile klicken, die die DetailComponent-Seite aufruft. Wenn ich auf die Zeile klicke, um die Details zu sehen, bekomme ich ein HTTP 404 für dieses Problem.

Ich bin nicht klar, wie die eckige URL aussehen sollte, damit sie die Detailseite aufrufen kann?

HTTP-Fehler ich

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

In meiner dropwizard Anwendung ich die statischen Vermögenswerte diene, wie unten

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

Dies sind meine Winkel Routen

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

Aus meine Hauptkomponente, ich die unten angeben, um die Detailseite

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

Unten ist mein 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> 

In meinem Winkel cli.json Datei zu navigieren ich das deployUrl": "dashboard/" Attribut angegeben, die den Weg in index.html Karten wenn ich den Befehl ng ausführen.

+1

ich denke, Sie sollten werden mit 'this.router.navigate ([ 'Detail']);' –

+0

Aber ich brauche ein neues Popup-Fenster mit dem Router Zustand zu öffnen. Kann ich das Gleiche mit den oben genannten tun? – megan

+0

müssen Sie modal verwenden. Hast du einen Plünderer? –

Antwort

1

Sie sollten window.open nicht verwenden, um in SPA zu navigieren.

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

Warum möchten Sie den Benutzer vom Bildschirm weg bewegen? Sie können den Benutzer entweder direkt zur Seite detail navigieren oder das modale Fenster öffnen.

Wenn Sie noch Benutzer zum nächsten Fenster verschieben möchten könnten Sie

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

Danke Pankaj, wie kann ich ein Popup-Fenster mit dem oben genannten öffnen? Es ist mir nicht klar, ob das möglich ist. Bitte beachten Sie mein onRowClick oben in der MasterComponent – megan

+0

Werfen Sie einen Blick auf aktualisierte Antwort –