auf Refresh-Route richtet sich an Standardroute mit angular2 Router

Ich benutze Angular2 Router, um Routing für meine Anwendung zu konfigurieren Hier ist mein Code-Snippet.auf Refresh-Route richtet sich an Standardroute mit angular2 Router

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; 
import { AppComponent } from './app.component'; 
import { DashboardComponent } from './dashboard/dashboard.component'; 
import { UpdateprofileComponent } from './updateprofile/updateprofile.component'; 
import { ChangepasswordComponent } from './changepassword/changepassword.component'; 
import { CookieService } from 'angular2-cookie/services/cookies.service'; 
import { PathLocationStrategy, LocationStrategy, HashLocationStrategy } from '@angular/common'; 

const routes = [ 
    { 
    path: 'dashboard', 
    component: DashboardComponent 
    }, 
    { path: 'updateprofile', component: UpdateprofileComponent }, 
    { path: 'changepassword', component: ChangepasswordComponent }, 
    // Not found 
    { path: '**', redirectTo: 'dashboard' } 
]; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    DashboardComponent, 
    UpdateprofileComponent, 
    ChangepasswordComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    NgbModule.forRoot(), 
    RouterModule.forRoot(routes, { useHash: true }) 
    ], 
    providers: [CookieService], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { }

header.component.html

<header> 
    <select [(ngModel)]="userOperationType" (ngModelChange)="fnSetOperationType(userOperationType)" class="col-md-12 select-style"> 
         <option value="dashboard">Account Administration</option> 
         <option value="changepassword" selected>Change Password</option> 
         <option value="updateprofile">Your Profile</option> 
        </select> 
</header>

header.component.ts

import { Component, OnInit,Input } from '@angular/core'; 
import { UserDetailsService } from '../services/user-details.service'; 
import { Router } from '@angular/router'; 

@Component({ 
    selector: 'app-header', 
    templateUrl: './header.component.html', 
    styleUrls: ['./header.component.scss'], 
    providers: [UserDetailsService] 
}) 
export class NvidiaHeaderComponent implements OnInit { 


    constructor() { } 


    fnSetOperationType(routeName) { 
    this.route.navigate([routeName]); 

    } 
}

index.html

<!doctype html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <title>Angular2Routing</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> 
    <app-root>loading... 
    </app-root> 
    <script type = "text/javascript" > 
history.pushState(null, null, '/#/dashboard'); 
window.addEventListener('popstate', function(event) { 
history.pushState(null, null, '/#/dashboard'); 
}); 
</script> 
</body> 

</html>

Das ist mein Routing in app.module ist. ts. Nach dem Navigieren zu changepassword route ist meine URL http://localhost:4200/#/changepassword. Wenn ich meine Seite aktualisiere oder diese URL in einem neuen Tab öffne, leitet meine URL zu http://localhost:4200/#/dashboard (Standardroute) um.

Ich brauche die gleiche Route nach dem Aktualisieren meiner Seite oder wenn ich kopiere die Route in einem anderen Tab einfügen Ich brauche eine entsprechende Route zu bekommen.

Bitte helfen Sie mir. Danke im Voraus.

Quelle

2017-03-07 Isetty Ravitejakumar

Versuchen Sie, die Verwendung als Standard aus Ihrem Dashboard-Pfad zu entfernen. Statt zu Ihrem Wildcard-Pfad gehen Router nimmt die Verwendung als Standard-Konfiguration –

Verwenden Sie Apache als Webserver? –

@HassanFalahi Ich benutze Apache nicht, ich mache es nur mit angular-cli. ng serve macht meine Arbeit. –

ich einen kleinen Fehler in index.html getan haben. Ich habe das folgende Skript entfernt. Ich habe es benutzt, um den Browserverlauf zu löschen.

<script type = "text/javascript" > 
history.pushState(null, null, '/#/dashboard'); 
window.addEventListener('popstate', function(event) { 
history.pushState(null, null, '/#/dashboard'); 
}); 
</script>

Es funktionierte wie Charme !!! Danke für die Hilfe. :)

Quelle

2017-03-09 06:16:06

Statt useAsDefault: true, versuchen Sie die Standard-Route zu Ihrem Armaturenbrett umleiten:

{ path: '', redirectTo: 'dashboard', pathMatch: 'full' }, 
{ 
    path: 'dashboard', 
    component: DashboardComponent, 
    //useAsDefault: true //remove this 
}

Quelle

2017-03-07 06:59:51 mickdev

Ich entfernte useAsDefault, aber immer noch keine Verwendung @mickdev –

haben Sie "manuell" in "ChangepasswordComponent" umleiten? Können Sie Ihre Frage bearbeiten und ihren Code bereitstellen? – mickdev

Versuchen Sie auch, die Reihenfolge der Router zu ändern, setzen Sie changepass ... vor dem Dashboard und sehen Sie, ob das Ihr Problem löst. – mickdev

auf Refresh-Route richtet sich an Standardroute mit angular2 Router

Antwort

Verwandte Themen