路由到模块

Question

免责声明：这是我第一次用角度编程，这很可能是一个误解，因此我的问题是无效的

---

我已经开始编写一个应用程序，该应用程序应该具有几个复杂的功能。因此，我将单个功能放入单个模块中，这样我就可以将整个模块作为简单导入加载到我的应用程序中，并将其放在 HTML 中。

简化的文件夹结构

app.module.ts
app.component.ts
app.component.html
feature/feature.module.ts
feature/componentA/componentA.component.cs
...

在

FeatureModule

中，我导出包含所有子组件的主要组件。

然后在

AppModule

我像这样加载其他模块

import { FeatureModule } from './feature/feature.module';

...

@NgModule({
  declarations: [ .. ],
  imports: [
    .. ,
    FeatureModule
  ],
  ...
})

然后我可以在我的 html 中添加功能组件。就是这样。

但是现在我想添加路由，我需要指定一个特定的组件，而不是模块。

这引出了我的问题：我应该如何路由？或者：我应该如何构建我的复杂功能以从外部隐藏所有内部结构。我只想公开一个可以插入到我的应用程序中的“片段”。即插即用，如果您愿意的话

Answer 1

您可以使用延迟加载路线，基本上只是将路线指向您的

FeatureModule

，然后让您的

FeatureModule

拥有自己的路线。这样，除了基本级别模块之外，功能内部的所有内容都对基本路由器隐藏，我相信这就是您想要的？

例如：

在app-routing.module.ts中

...

const routes: Routes = [
  {
    path: 'feature', 
    loadChildren: () => import('./feature/feature.module.ts').then(m => m.FeatureModule)
  },
];

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

将路由器模块添加到 app.module.ts 中

...

@NgModule({
  imports: [
    ...,
    AppRoutingModule,
  ],
  ...
})
export class AppModule { }

然后你可以在你的组件中添加一条路由

FeatureModule

...
const routes: Routes = [
  {
    path: 'componenta',
    component: ComponentA
  }
];

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

角度文档

Answer 2

查看延迟加载和 Route 的 loadChildren 属性。

您的路线如下：

const routes: Routes = [

      {
        path: 'items',
        loadChildren: () => import('./items/items.module').then(m => m.ItemsModule)
      }
    ];

然后延迟加载的模块将有自己的路由来指定当模块路由到时显示哪个组件。如果模块中只有一个“功能”组件，则可以只是一条路线。

文档位于 https://angular.io/guide/lazy-loading-ngmodules