Question

我在使用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 { }

然后我已阅读此article重定向到＆＃34; 404 Not Found＆＃34;组件，如果用户输入的不是现有的URL地址。我在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 }？

Answer 1

这里的主要问题是路线的顺序。

@NgModule({
  imports: [
    ...
    NewsCarsModule, // this order is important
    AppRoutingModule // where you declared PageNotFoundComponent
  ],
  ...
})
export class AppModule {}

另见

https://github.com/angular/angular/issues/12648

应用程序路由覆盖模块路由

1 个答案: