正在使用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路由器指向默认路由

回答

相关问题