如何解决延迟加载模态对话框时如何解决EntryComponent问题?
我正在使用Angular 8,并且想在项目中延迟加载对话框。这样做时,我得到以下错误:-
未找到EditProfileComponent的组件工厂。您是否将其添加到 @ NgModule.entryComponents?
因为这是组件的延迟加载,所以我不想在app.module.ts中声明 EditProfileComponent 。
详细代码如下:-
app-routing.module.ts
import { HomeComponent } from './Pages/HomePages/Home/home.component';
const routes: Routes = [
{ path: 'home',component: HomeComponent
children: [
{ path: 'editprofile',loadChildren: () => import('./Pages/ProfilePages/EditProfile/editprofile.module').then(m => m.EditProfileModule)},]},{ path: '**',redirectTo: '/login' },];
home.component.html
<mat-menu #welcome="matMenu">
<button class="button-menu" mat-menu-item [routerLink]="editprofile" [queryParams]="{dialog:
true}">Edit Profile</button>
</mat-menu>
home.component.ts (“编辑个人资料”页面已从此处正确打开)
import { EditProfileComponent } from '../../ProfilePages/EditProfile/editprofile.component'
constructor(private route: ActivatedRoute,private router: Router,private dialog: MatDialog) {
route.queryParams.subscribe(params => {
if (params['dialog']) {
this.openEditProfile();
}
});
}
public openEditProfile() {
const editProfDialogRef = this.dialog.open(EditProfileComponent,{
width: '50%',disableClose: true
});
}
editprofile-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes,RouterModule } from '@angular/router';
import { EditProfileComponent } from './editprofile.component';
const routes: Routes = [
{ path: '',component: EditProfileComponent },];
@NgModule({
imports: [RouterModule.forChild(routes)],exports: [RouterModule]
})
export class EditProfileRoutingModule { }
editprofile.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { EditProfileRoutingModule } from './editprofile-routing.module';
import { EditProfileComponent } from './editprofile.component';
@NgModule({
imports: [
CommonModule,EditProfileRoutingModule,],declarations: [
EditProfileComponent,entryComponents: [
EditProfileComponent,})
export class EditProfileModule { }
如何解决该问题?
解决方法
如here对Fateh Mohamed所述:
...如果ConfirmComponent在另一个模块中,则需要将其导出,以便可以在外部使用,请添加:
exports: [ ConfirmComponent ]
因此,只需将EditProfileComponent添加到editprofile.module.ts的exports数组中,您就可以使用了!
快乐编码:)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。