【问题标题】:Angular lazy-loading implementation for NavMenuComponent componentNavMenuComponent 组件的角度延迟加载实现
【发布时间】:2020-09-30 09:54:08
【问题描述】:

我已经按照官方Lazy-loading feature module 页面上的方法在我的项目中实现了延迟加载功能。但是,我不知道如何将不会被定向为 NavMenuComponent、Sidebar 等的模块或组件处理。另一方面,我应该为 HomeComponent 设置path: '', 还是为 Home 创建新的路由?

这是我混淆的几点:

1. 我认为我不需要像为其他路线创建的那样创建navmenu-routing.module.ts 和navmenu.module.ts。这是真的吗?

2. 在 app.module 中,我定义了我的 NavMenuComponent,如下所示。但我不确定是否应该将 NavMenuComponent 移至声明字段?

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule,
    NavMenuComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 在 app-routimg.module 中,我不使用NavMenuComponent。对吗?

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: () => import('./counter/customer.module').then(m => m.CustomerModule)
  },
  {
    path: 'orders',
    loadChildren: () => import('./order/order.module').then(m => m.OrderModule)
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

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

有什么错误或需要检查的地方吗?

【问题讨论】:

    标签: angular angular-routing angular-lazyloading


    【解决方案1】:

    不太清楚这个问题,但我感觉你正在尝试让路由延迟加载工作

    1. 您的应用模块和路由模块看起来正确

    2. 现在在 order 模块中,您将有一个 order-routing.module.ts 文件,您可以在其中定义路径,例如

      const routes: Routes = [
          {path:'list', component: ListOrdersComponent}
        ];
    
    1. 现在,在您的导航组件中,您可以调用路由 /order/list,它将在路由器出口中显示 ListOrdersComponent。

    【讨论】:

    • 感谢您的回复。关于您的答案#2,我像const routes: Routes = [ { path: '', component: CounterComponent } ];一样使用它。我觉得也对吗?
    • Reagrding 我的问题 #1,我问我是否应该按照您在回答中的描述创建 navmenu-routing.module.ts 和 navmenu.module.ts。因为没有直接导航栏的路径,我认为不需要为此组件创建navmenu-routing.module.ts 和navmenu.module.ts。这是真的吗?
    • 关于你的答案#3,我通过 nav-component.html 调用相关路由,在 nav-component.ts 文件中没有什么特别之处。我认为这也是正确的?
    • 对于您的 cmets #1 是正确的 - 您将简单地调用 /counter .. 空白路线将呈现您的组件。 #2 我建议您将导航组件保留在应用程序模块中.. 在我看来,创建一个单独的模块是一种过度杀伤力.. #3 是正确的,仅用于调用路由
    猜你喜欢
    • 1970-01-01
    • 2015-07-01
    • 2020-12-29
    • 2018-05-22
    • 2017-11-02
    • 2021-05-22
    • 2017-12-05
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多