时间戳

首页 > 解决方案 > 角度为 6 的主布局插座中的嵌套插座

angular - 角度为 6 的主布局插座中的嵌套插座

问题描述

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

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

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

每个模块都有一个只包含一个出口的空组件，除了布局（包含页眉、正文和页脚）。

我想实现这些路线：

视觉解释

我添加没有问题account.module，但我不知道添加时如何配置路由layout.module

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

如果我走错了路，请告诉我。

代码

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 { }

标签： angulartypescriptroutingnested-routes

解决方案

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

你需要做什么：

app.module.ts

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

布局.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 { }

您需要知道的主要事情是所有角度路线都合并在一个路线配置中。要理解这一点，我建议您观看@deborahk的精彩视频

你不能只写

{ 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: [
   ...
    LayoutModule,
    RouterModule.forRoot([
      { path: '', loadChildren: './layout/layout.module#LayoutModule' },
      { path: '**', component: PageNotFoundComponent }
    ])
  ],
  ...
})
export class AppModule { }

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

您也可以在Stackblitz Demo上在线试用

也可以看看

推荐阅读