Angular 8 的子路由配置

Question

我有一个 angular 8 的应用，其中 a 创建了两个模块：

• testModule 和 SimulatorModule

模拟器有路由文件，但 testModule 没有。

我想将模拟器中的所有组件加载为 TestModule 中的 TestComponent 的子组件。

但是当我运行应用程序时期望测试组件是午餐时，我总是重定向到 appComponent。

这些是代码：

**//app.routing.ts**
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
{
 path: '', 
 redirectTo: 'simulator',
 pathMatch: 'full'
},
{
 path: 'simulator',
 loadChildren: './simulator/simulator.module#SimulatorModule'
}
]
 @NgModule({
  imports: [
  RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled' })
 ],
 exports: [RouterModule],
 providers: []
 })
 export class AppRoutingModule {}

和

//simulator.routing.module
import { NgModule } from '@angular/core';
import { RouterModule, Routes, Route } from '@angular/router';

import { SimulatorPageComponent } from '@app/simulator/simulator-page/simulator-page.component';
import { Test } from '@app/test/test.service';


const routes: Routes = [
  Test.childRoutes([
    {
      path: '',
      component: SimulatorPageComponent
    }
  ])
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  declarations: []
})
export class SimulatorRoutingModule { }

和

  //Test.service
  static childRoutes(routes: Routes): Route {  
    return {
      path: '',
      component: TestComponent,
      children: routes,
      data: { reuse: true }
    };
  }

谁知道发生了什么？

Answer 1

我像下面这样使用它。 Ofc，你可以用其他任何方式来做。

文件夹结构：

• /默认
• /富
  • /子
• /foo-bar

src/app/app-routing.module.ts

const routes: Routes = [
    {
        path: '', // localhost:4200/
        loadChildren: () => import('./default/default.module').then(m => m.DefaultModule), // lazy load
    },
    {
        path: 'foo', // localhost:4200/foo
        loadChildren: () => import('./foo/foo.module').then(m => m.FooModule), // lazy load
    },
    {
        path: 'foo/bar', // localhost:4200/foo/bar
        loadChildren: () => import('./foo-bar/foo-bar.module').then(m => m.FooBarModule), // lazy load
    },
    {
        path: 'baz', // localhost:4200/baz
        component: BazComponent,
    },
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {
}

app.component.html

<header><!-- code --></header>
<main>
    <router-outlet></router-outlet>
</main>
<footer><!-- code --></footer>

因为我使用loadChildren，所以我需要一个组件加载。所以我在./default、./foo 和./foo-bar 目录中需要更多“xy-routing.module.ts”：

例如foo-routing.module.ts 包含在foo.module.ts 中的内容。

const routes: Routes = [
    {
        path: '', // every time is ''. Ofc, you can use ':id' here -> when /foo/100   
        component: FooComponent
    }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class FooRoutingModule {
}

---

如果你想在src/app/foo-bar/foo-bar.component.html中使用<router-outlet></router-outlet>

src/app/foo-bar/foo-bar-routing.module.ts

onst routes: Routes = [
    {
        path: '',
        component: FooBarComponent,
        children: [
            {
                path: 'sub', // localhost:4200/foo/bar/sub
                loadChildren: () => import('./sub/sub.module').then(m => m.SubModule) // src/app/foo-bar/sub/sub.module.ts
            },
        ]
    },
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class FooBarRoutingModule {
}

Answer 2

非常感谢 Numichi 的帮助。最后它的工作。主要问题是它只显示一个空白页面，我不知道如何检查这些错误，所以在打开控制台并逐渐应用您的建议后它可以工作。