angular 6 主布局插座中的嵌套插座

Question

我正在构建一个 angular 6 应用程序，其中有两个独立的屏幕：

登录（登录、注册、忘记密码、个人资料）
- 那些页面不是布局的一部分
布局（仪表板、产品、发票）
- 这些页面应该共享相同的布局

我的应用程序是基于模块的，所以我有

app.module.ts
account.module.ts
dashboard.module.ts
products.module.ts
invoices.module.ts

除了布局（包含页眉、正文和页脚）之外，每个模块都有仅包含一个插座的空组件。

我想实现那些路线：

site.com/account/login
site.com |将导航到仪表板
- site.com/dashboard
site.com/products
site.com/invoices

Visual explanation

我添加account.module没有问题，但是我不知道如何在添加layout.module[=24时配置routes =]

注意：也许我的整个方法是错误的，但对我来说这是唯一合乎逻辑的事情，因为我有包含组件的模块，我想为可能的延迟加载[=做好准备101=] 配置。

如果我走错了路，请指教。

代码

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgModule } from '@angular/core'; import { HttpClientModule } from '@angular/common/http'; import { RouterModule } from '@angular/router'; import { AppComponent } from './app.component'; import { LayoutModule } from './layout/layout.module'; import { AccountModule } from './feature-components/membership/account.module'; @NgModule({ declarations: [ AppComponent, FetchDataComponent ], imports: [ BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }), BrowserAnimationsModule, HttpClientModule, LayoutModule, AccountModule, BrowserAnimationsModule RouterModule.forRoot([ { path: '', component: LayoutOutletComponent }, { path: '**', component: PageNotFoundComponent } ]), ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

app.component.html

<router-outlet></router-outlet>

account.module.ts

import { NgModule } from '@angular/core'; import { SharedModule } from '@app-shared/shared.module'; import { LoginComponent } from './login/login.component'; import { ResetPasswordComponent } from './reset-password/reset-password.component'; import { ChangePasswordComponent } from './change-password/change-password.component'; import { RouterModule } from '@angular/router'; import { AccountOutletComponent } from './account-outlet/account-outlet.component'; @NgModule({ imports: [ SharedModule, RouterModule.forChild( [{ path: 'account', component: AccountOutletComponent, children: [ { path: 'login', component: LoginComponent }, { path: 'reset-password', component: ResetPasswordComponent }, { path: 'change-password', component: ChangePasswordComponent }, { path: '', redirectTo: 'login', pathMatch: 'full' } ] }] ) ], exports: [ LoginComponent, ResetPasswordComponent, ChangePasswordComponent ], declarations: [ AccountOutletComponent, LoginComponent, ResetPasswordComponent, ChangePasswordComponent ] }) export class AccountModule { }

所以，这里没有问题，当我添加 layout module 时问题就开始了，它应该保持布局和内部的常量，所有嵌套模块..老实说，我什至不知道如何开始路由配置

import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterModule } from '@angular/router'; import { NavMenuComponent } from './nav-menu/nav-menu.component'; import { FooterComponent } from './footer/footer.component'; import { LayoutOutletComponent } from './layout-outlet/layout-outlet.component'; import { InvoicesModule } from '../feature-components/invoices/invoices.module'; @NgModule({ imports: [ CommonModule, InvoicesModule, RouterModule )], exports: [ NavMenuComponent, FooterComponent ], declarations: [ NavMenuComponent, FooterComponent, LayoutOutletComponent ] }) export class LayoutModule { }

Answer 1

你应该做以下事情

在应用程序模块中创建路由来加载模块而不是组件
在布局模块中创建路由以加载 Dashboard、Product 和 InvoicesModule
在布局组件中设置 header router-outlet 和 footer and/or 其他布局元素
在模块仪表板、产品和发票设置路径中加载组件

app.module

    RouterModule.forRoot([
      { path: '', loadChildren: '(PathToLayoutMoudle)#LayoutModule' },
      { path: '**', component: PageNotFoundComponent }
    ]),

layout.module

    RouterModule.forChild([
      { path: '', component: LayoutComponent},
          children: [
          { path: 'dashboard',loadChildren: 
              PathToDashboardMoudle)#DashboardMoudle'},
          { path: 'products',loadChildren: 
              PathToProductsMoudle)#ProductsMoudle'},
          { path: 'invoices',loadChildren: 
              PathToInvoicesMoudle)#InvoicesdMoudle'},
      ]
    ]),

account.module

  RouterModule.forChild(
  [{
    path: '', component: AccountOutletComponent,
    children: [
      { path: 'login', component: LoginComponent },
      { path: 'reset-password', component: ResetPasswordComponent },
      { path: 'change-password', component: ChangePasswordComponent },
      { path: '', redirectTo: 'login', pathMatch: 'full' }
    ]
  }]

Answer 2

我认为你走在正确的道路上。首先你需要处理急切的路由然后你可以切换到惰性模块。

您需要做的事情：

app.module.ts

@NgModule({
  imports: [
    BrowserModule,
    AccountModule,
    LayoutModule,
    RouterModule.forRoot([
      { path: '**', component: PageNotFoundComponent }
    ])
  ],
  declarations: [
    AppComponent,
    PageNotFoundComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

layout.module.ts

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild([
      {
        path: '',
        component: LayoutOutletComponent,
        children: [
          {
            path: 'dashboard',
            loadChildren: () => DashboardModule
          },
          {
            path: 'products',
            loadChildren: () => ProductsModule
          },
          { path: '', redirectTo: '/dashboard', pathMatch: 'full' }
        ]
      }
    ])
  ],
  declarations: [
    LayoutOutletComponent
  ]
})
export class LayoutModule { }

您需要知道的主要事情是所有 angular 路由都合并在一个路由配置中。要理解这一点，我建议您观看 @deborahk

的 great video

你不能只写

{ path: '', component: LayoutOutletComponent},

并分别导入其他模块（ProductsModule、DashboardModule）。嵌套路由应作为子路由提供。

现在，当您配置了所有路由后，您可以轻松切换到延迟加载模块：

{
  path: '',
    component: LayoutOutletComponent,
    children: [
      {
        path: 'dashboard',
        loadChildren: 'pathToModule#DashboardModule'
      },
      {
        path: 'products',
        loadChildren: 'pathToModule#ProductsModule'
      },
      { path: '', redirectTo: '/dashboard', pathMatch: 'full' }
    ]
}

你还可以在 AppModule 中延迟加载 LayoutModule

@NgModule({
  imports: [
   ...
    <s>LayoutModule</s>,
    RouterModule.forRoot([
      { path: '', loadChildren: './layout/layout.module#LayoutModule' },
      { path: '**', component: PageNotFoundComponent }
    ])
  ],
  ...
})
export class AppModule { }

我在 github 上创建了 ng-nested-outlets 应用程序，所以请尝试一下。

您也可以在 Stackblitz Demo

上在线试用

另见

angular 6 主布局插座中的嵌套插座

Nested outlets in master layout outlet in angular 6

routing

nested-routes

typescript

angular