我如何使用带有延迟负载的路由器插座

Question

早上好，我将尝试解释我的问题。

我有一个Angular SPA，在这个SPA中，我实现了延迟加载，并且在其中一个模块中，我想创建subModules。

我的意思是，此SPA中有很多页面，并且在其中一个页面中有一个标头，它在几个页面中共享，但是此标头仅在几个页面中而不是全部。

所以我创建了一个模块。我可以获取模块，但无法获取子模块。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { UserComponent } from './user/user.component';

export const routes: Routes = [
  // {
  //   path: '',
  //   component: UserComponent,
  //   children: [
  //     { path: '', component: AccountsMenuComponent },
  //   ]
  // },
  {
    path: '',
    component: UserComponent,
    children: [
      { path: 'accounts-menu', loadChildren: './accounts-menu/accounts-menu.module#AccountsMenuModule' }
    ]
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

export class UserRoutingModule {}

我知道我可以像在注释行中看到的那样加载一个组件，但是如果这样做，我每次都加载UserComponent时，我就不要了。

我想在加载其子模块之后加载一次。

在mainModule中，我有这个html代码。 （user.component.html）

<div class="section-content ">
    <ng-container zoomHeader>
        <div>
            <app-user-information-header #userSettingsHeader>
            </app-user-information-header>
        </div>
    </ng-container>


    <ng-container zoomMain>
        <div>
            <router-outlet></router-outlet>
        </div>
    </ng-container>


</div>

我与您分享account-menu-routing.module.ts的代码

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AccountsMenuComponent } from './accounts-menu.component';

const routes: Routes = [
  {
     path: '', 
     component: AccountsMenuComponent 
    }
  ];

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

还有account-menu.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { AccountsMenuRoutingModule } from './accounts-menu-routing.module';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    AccountsMenuRoutingModule
  ]
})
export class AccountsMenuModule { }

有任何建议吗？

Answer 1

创建HeaderModule，并将您的HeaderComponent添加到declarations和exports数组：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { HeaderComponent } from './header.component.ts';

@NgModule({
  declarations: [HeaderComponent],
  imports: [
    CommonModule
  ],
  exports: [HeaderComponent]
})
export class HeaderModule { }

将HeaderModule添加到模块的imports阵列中，您需要在以下位置提供HeaderComponent：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { HeaderModule } from './header.module';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    AccountsMenuRoutingModule,
    HeaderModule
  ]
})
export class AccountsMenuModule { }

之后，您可以在模块范围内使用HeaderComponent，您已经添加了它，这意味着如果在此模块中导入了某些组件，并且还向其中导入了HeaderComponent，则可以在该组件中使用它。