2017-10-19 4 views
0

Ich bin ein Angular newb und baue einen einfachen ein Pager. Ich habe den Router eingerichtet, so dass die leere URL zur Dashboard-Komponente umleitet. Daher wird localhost:4200 automatisch an localhost:4200/dashboard Perfect weitergeleitet.Angular4 Refresh-Seite wiederholt Seite in URL

Wenn ich jedoch auf die Schaltfläche "Aktualisieren" klicke, wird ein weiteres Dashboard an die URL angehängt, und seltsamerweise wird die Seite tatsächlich gut geladen. localhost:4200/dashboard/dashboard

Wenn ich traf wieder aufzufrischen es eine andere Armaturenbrett auf die URL hinzufügt und jetzt wird es laden nicht

localhost:4200/dashboard/dashboard/dashboard 

Das Wesen Frage, warum es auf ‚/ Dashboard‘ auf meine URL nicht halten das Hinzufügen jede Seite aktualisiert?

Hier ist routing.module.ts

import { Routes, RouterModule } from '@angular/router'; 

import { DashboardComponent } from '../_feature/iacuc/dashboard.component'; 

const appRoutes: Routes = [ 
    { path: '', redirectTo: 'dashboard', pathMatch: 'prefix' }, 
    { path: 'dashboard', component: DashboardComponent } 

    // otherwise redirect to home 
    { path: '**', redirectTo: '' } 
]; 

export const Routing = RouterModule.forRoot(appRoutes); 

Hier meine index.html

<!DOCTYPE html> 
<html> 
<head> 
    <base href="/" > 
    <title>Angular 2 JWT Authentication Example</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <!-- bootstrap css --> 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 

    <!-- application css --> 
    <link href="app.css" rel="stylesheet" /> 

    <!-- polyfill(s) for older browsers --> 
    <script src="node_modules/core-js/client/shim.min.js"></script> 

    <script src="node_modules/zone.js/dist/zone.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 

    <script src="systemjs.config.js"></script> 
    <script> 
     System.import('app').catch(function (err) { console.error(err); }); 
    </script> 
</head> 
<body> 
    <app>Loading...</app> 
</body> 
</html> 

Der Rest des Codes vorformulierten ist man in den einleitenden Beispielen sehen, aber ich kann mehr zeigen Code, wenn es hilfreich ist.

Danke.

+2

'pathMatch: 'prefix'' Änderung' pathMatch:' full'' –

+0

Das Schlüsselwort ist wörtlich 'Vorsilbe' haha – Carsten

+0

'voll' funktioniert auch nicht. – user441058

Antwort

1

pathMatch: 'full' statt pathMatch: 'prefix'

lesen Sie hier verwenden müssen: https://angular.io/api/router/Routes

+0

Zusätzlich zum Ändern in pathMatch: "full" wie Sie vorgeschlagen haben, müssen Sie auch die Route von der Verwendung einer Zeichenfolge zur Verwendung des Komponentennamens ändern. Es hängt diese Zeichenfolge an die Root-URL an. Richtige Route: {Pfad: '', Komponente: DashboardComponent, pathMatch: 'full'} – user441058