角度为8的子路径配置

Question

我有一个角度为8的应用，其中一个创建了两个模块：-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，您可以采用其他任何方式。

文件夹strukcute：

• /默认
• / foo
  • / sub
• / 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 {
}

---

如果要使用<router-outlet></router-outlet>中的src/app/foo-bar/foo-bar.component.html

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的帮助。终于可以了。主要问题是它只显示一个空白页面，我不知道如何检查这些错误，因此在打开控制台并逐步应用您的意见之后，它就可以工作。