我在使用 Angular 4.1.1
开发应用程序时遇到了一些有趣的情况。我一直在模块中声明路由,并在所有模块中执行此操作。
例如,new-cars.routing.module.ts
:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { NewCarsComponent} from './new-cars.component';
import { NewCarsResolver } from './new-cars.resolver';
@NgModule({
imports: [
RouterModule.forChild([
{
path: 'cars/:id',
component: NewCarsComponent,
resolve: {
card: NewCarsResolver
}
}
])
],
exports: [RouterModule]
})
export class NewCarsRoutingModule { }
然后,如果用户输入的URL地址不存在,我将阅读本文以重定向到"404 Not Found"组件。我在app-routing.module.ts
宣布了这条路线:
export const routes: Routes = [
{ path: '**', component: PageNotFoundComponent }
];
现在所有页面都显示Page not found
.
app.module.ts:
import ...;
import { NewCarsModule } from './new-cars/new-cars.module';
import ...;
@NgModule({
imports: [
RouterModule,
BrowserModule,
AppRoutingModule,
HomeModule,
SearchModule,
CoreModule,
NewsCarsModule,
],
declarations: [
AppComponent,
PageNotFoundComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
我的问题是是否可以只在一个地方编写{ path: '**', component: PageNotFoundComponent }
,而不是在所有组件中编写?
这里的主要问题是路线的顺序。
@NgModule({
imports: [
...
NewsCarsModule, // this order is important
AppRoutingModule // where you declared PageNotFoundComponent
],
...
})
export class AppModule {}
参见
- https://github.com/angular/angular/issues/12648