角路由:在定义具有多个路由文件的NotFoundComponent时出现问题

时间:2018-11-23 17:45:58

标签: javascript angular typescript angular6

我正在创建一个NotFoundComponent,以便每个不存在的URL都会向用户显示一个友好的页面。

我的Angular 6项目具有5个功能(CRUDL):

CompanyComponent, EmployeeComponent, BranchComponent, BenefitsComponent, MainComponent

每个组件都有其自己的.module和.routing,例如company.routing.ts定义如下路由:

    export const routes: Routes = [
    {
      path: "branch",
      component: EmptyComponent,
    }
    ...
    @NgModule({
imports: [
    RouterModule.forChild(routes),
    ...

它还定义了其子元素,例如路径:“ branch /:id”。

因此,我对构建路由的方式没有任何问题。

我现在面临的问题是如何定义NotFoundComponent的路径。

因为我没有一个用于定义路由的文件,所以如果将/ 404页面的定义放在main.routing.ts中路由器定义的底部,则将其他所有路由定义在功能(如company.routing.ts)将重定向到/ 404,因为angular使用的是第一个匹配策略。

到目前为止我尝试过的事情:

在main.routing.ts上:

export const routes: Routes = [
{
    path: "main",
    component: MainComponent,
},
{
    path: "404",
    resolve: {
        routeTitle: TitleResolver,
    },
    component: NotFoundComponent,
},
{
    path: "",
    pathMatch: "full",
    redirectTo: "/main",
},
{
    path: "**",
    redirectTo: "/404",
}

如果我这样说,当我尝试访问路由/ company(在company.routing.ts中定义)时,它将被重定向到/ 404。

我还尝试在我的功能之一的任何路由上定义它,例如在company.routing.ts

{
    path: "**",
    redirectTo: "/404",
}

然后,发生一件有趣的事情,如果我在Benefits.routing.ts上定义这段代码,我可以访问 /好处,但可以访问 / branch / employee ,其余路由将重定向到/ 404。

project structure

如果在分支上定义它,则可以访问 /好处 / branch ,但 / employee ,其余路线将是重定向到/ 404。

我可以将此代码放在最后加载的功能上,它可以工作,但是我想知道是否可以用另一种方法解决此问题,我是否可以定义要成为最后一个加载的路线?

提前谢谢。

0 个答案:

没有答案