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

Question

我正在建立一个角度为6的应用程序,我有两个独立的屏幕:

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

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

• 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

---

视觉解释

---

我没有添加的问题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 { }

Answer 1

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

你需要做什么：

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

您需要知道的主要事情是所有角度路线都合并在一个路线配置中。要理解这一点，我建议您观看@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 上在线试用

也可以看看

• 从延迟加载到“正常”加载的角度切换