正在使用angular2路由器指向默認路由

Iam使用angular2路由器爲我的應用配置路由這是我的代碼片段。正在使用angular2路由器指向默認路由

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>

這是我在app.module路由。 TS。導航到更改密碼路由後，我的網址是http://localhost:4200/#/changepassword。當iam刷新我的頁面或在新標籤中打開此URL時，我的URL將重定向到http://localhost:4200/#/dashboard（默認路由）。

我需要刷新我的網頁後得到相同的路線，或者如果我複製粘貼路線在另一個選項卡我需要獲得相應的路線。

請幫幫我。提前致謝。

來源

2017-03-07 Isetty Ravitejakumar

嘗試從您的儀表板路徑中刪除使用作爲默認值。而不是去你的通配符路徑路由器正在選擇使用作爲默認配置 –

您是否使用Apache作爲Web服務器？ –

@HassanFalahi Iam不使用Apache iam，只是使用angular-cli來做它。 ng serve做我的工作。 –

我已經做了index.html中的一個小錯誤。我已經刪除了以下腳本。我用它來清除瀏覽器歷史記錄。

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

它的工作就像魅力！感謝您的幫助。:)

來源

2017-03-09 06:16:06

相反的useAsDefault: true，嘗試將默認路由重定向到儀表板：

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

來源

2017-03-07 06:59:51 mickdev

我刪除了useAsDefault，但仍然沒有使用@mickdev –

您是否在「ChangepasswordComponent」中手動重定向？你能編輯你的問題並提供它的代碼嗎？ – mickdev

還要嘗試更改路由器順序，在儀表板之前放置changepass ...並查看是否可以解決您的問題。 – mickdev

正在使用angular2路由器指向默認路由

回答

相關問題