Question

我在Angular2应用程序中导航非常简单，所以我很惊讶为什么我得到错误404.你可以看到负责显示项目细节的ItemDetails组件被注入。这是main.ts配置：

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {FormsModule}  from '@angular/forms'
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {App} from './app';
import {HttpModule}  from '@angular/http';
import {MdlModule} from 'angular2-mdl';
import {RouterModule, Routes}   from '@angular/router';
import {Main} from './app/containers';
import {DataService} from './app/services/data-service';
import {
    AppBar,
    ShortSearch,
    Authorization,
    Search,
    CollapseOnClick,
    ItemsList,
    ItemDetails,
    NavigationBar,
    SortByPricePipe,
    PageNotFound
} from './app/components';

const appRoutes: Routes = [
    { path: '', component: ItemsList },
    { path: '**', component: PageNotFound },
    { path: 'search', component: Search },
    { path: 'item/:id', component: ItemDetails }
];

@NgModule({
    declarations: [
        App,
        Main,
        AppBar,
        ShortSearch,
        Authorization,
        Search,
        CollapseOnClick,
        ItemsList,
        ItemDetails,
        NavigationBar,
        SortByPricePipe,
        PageNotFound
    ],
    imports: [BrowserModule,
        FormsModule,
        HttpModule,
        MdlModule,
        RouterModule.forRoot(appRoutes)
    ],
    bootstrap: [App],
    providers: [DataService]
})
export class AppModule {
}

platformBrowserDynamic().bootstrapModule(AppModule);

Answer 1

始终将'**'作为appRoutes数组中的最后一条路径，然后''：

const appRoutes: Routes = [
    { path: 'search', component: Search },
    { path: 'item/:id', component: ItemDetails }
    { path: '', component: ItemsList },
    { path: '**', component: PageNotFound },
];

Angular2 route throw 404错误

1 个答案: