角度2路由3.0.0-rc.2重复路由

时间:2016-09-12 17:24:05

标签: angular

我的角度2应用程序中的路由存在一些问题,例如我在

  

https://www.url.com/index

如果我重新加载页面,则网址似乎是

  

https://www.url.com/index/index

如果我再做一次

  

https://www.url.com/index/index/index

等等

我使用的版本是“@ angular / router”:“3.0.0-rc.2”

我的 app.routing.ts 似乎就是这个

import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { subprocessesComponent } from './Subprocesses.component';
import { moduleTermsComponent }   from './moduleTerms.component';
import { retailProcessesComponent } from './retailProcesses.Component';
import { seeDocTestComponent } from './seeDocTest.component';

//import { HeroesComponent }      from './heroes.component';
//import { HeroDetailComponent }  from './hero-detail.component';

const appRoutes: Routes = [
    {
        path: '',
        redirectTo: '/index',
        pathMatch: 'full'
    },
    {
        path: 'index',
        component: moduleTermsComponent
    },
    {
        path: 'processes/:id',
        component: retailProcessesComponent
    },    
    {
        path: 'processes/subprocesses/:id',
        component: subprocessesComponent
    },
    {
        path: 'seeDocs',
        component: seeDocTestComponent
    }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

顺便说一下,我正在使用webpack捆绑我的应用程序,所以在我的index.html中我有脚本<script type="text/javascript" src="../dist/app.bundle.js"></script>

如果有人知道发生了什么事,或者我做错了什么,我会感激一些帮助

提前致谢!

更新

我的 app.module.ts 如下所示:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { moduleTermsComponent } from './moduleTerms.component';
import { AppComponent } from './app.component';
import { processListComponent } from './processesList.component';
import { retailProcessesComponent } from './retailProcesses.Component';
import { subProcessItemsComponent } from './subProcessItems.component';
import { subprocessesComponent} from './Subprocesses.component';
import { seeDocTestComponent } from './seeDocTest.component';
import { HttpModule } from '@angular/http';
import {AccordionModule} from "ng2-accordion";

import { serviceTerms } from './serviceTerms.service'; 
import { MyLogger } from './MyLogger';
import { routing } from './app.routing';


@NgModule({
    imports: [
        BrowserModule,
        HttpModule,
        AccordionModule,
        routing
    ],
    declarations: [
        moduleTermsComponent,
        AppComponent,
        retailProcessesComponent,
        processListComponent,
        subprocessesComponent,
        subProcessItemsComponent,
        seeDocTestComponent
        //PaginatePipe
    ],
    providers: [serviceTerms],
    bootstrap: [AppComponent]
})
export class AppModule { }

1 个答案:

答案 0 :(得分:1)

添加

{provide: APP_BASE_HREF, useValue: '/'}

AppModule

的提供者