Angular如何在延迟加载的html中导入子项

Question

我试图用clidren和孙辈实现懒惰加载。更具挑战性的是，这些组件的名称相同，所以我使用别名。

因此，在我的一个孩子体内，我在html<app-Detail-index>部分导入了一个孙子，但我有错误。

堆叠角度13

因此，在NgModule上添加shemas，并移动细节加载以补偿

'grandchild ' is not a known element:
1. If 'grandchild' is an Angular component, then verify that it is part of this module.
2. If 'grandchild' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.ngtsc

const routes: Routes = [
{ path: '', redirectTo: 'index', pathMatch: 'prefix'},
{ path: 'index', component: IndexComponent },
{ path: ':domId/view', component: ViewComponent },
{ path: 'create', component: CreateComponent },
{ path: ':domId/edit', component: EditComponent } ,
{ path: 'domDetail', loadChildren: () => import('../domDetail/domDetail.module').then(m => m.DomDetailModule) },
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
],
})
export class DomRoutingModule { }
@NgModule({
declarations: [
CreateComponent,
EditComponent,
IndexComponent,
ViewComponent,
],
imports: [
CommonModule,
DomRoutingModule,
FormsModule,
ReactiveFormsModule,
]
})
export class DomModule { }
const routes: Routes = [
{ path: '', redirectTo: 'index', pathMatch: 'prefix'},
{ path: 'index', component: IndexComponent },
{ path: 'create', component: CreateComponent },
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
],
})
export class DomDetailRoutingModule { }
@NgModule({
declarations: [
CreateComponent,
IndexComponent,
],
imports: [
CommonModule,
DomDetailRoutingModule,
FormsModule,
ReactiveFormsModule,
]
})
export class DomDetailModule { }
const routes: Routes = [
{ path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule)},
{ path: '',   redirectTo: 'home', pathMatch: 'full' },
{ path: 'dom', loadChildren: () => import('./dom/dom.module').then(m => m.DomModule) },
{ path: '**', component: PageNotFoundComponent },
...

];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
declarations: [  

],  
providers: [  
], 
})
export class AppRoutingModule { }

Answer 1

这个stackblitz可以帮助您了解如何延迟加载模块、动态使用它们以及如何急切地加载组件。模块内部的组件找不到模块外部的组件。为了帮助模块找到一些东西，您可能必须将它们导入到您的模块中(懒惰/渴望(。我为所有的案例添加了一个例子。在代码中，必须将组件添加到模块中的声明和导出中。当您只想将组件与选择器一起使用时，您可能需要将适当的组件/模块添加到呈现它的模块中

Stackblitz装载模块和组件