angular 14 替换 ComponentFactoryResolver 实现动态创建组件
需求
移植弹出框到 angular 项目中。
方案
直接使用其他项目依赖
比较常用的有以下两个
但是通过查看源码，发现都使用使用 ComponentFactoryResolver 来实现组件的新建，然后通过document.body.appendChild 添加到页面上的，
但是，angular 文档中提示，ComponentFactoryResolver 不推荐使用。
Deprecated: Angular no longer requires Component factories. Please use other APIs where Component class can be used directly.
Note: since v13, dynamic component creation via ViewContainerRef.createComponent does not require resolving component factory: component class can be used directly.12
自己实现
没有了 ComponentFactoryResolver， 那么就使用 ViewContainerRef.createComponent
主要思路：
-
新建一个容器组件，获取到
ViewContainerRef@Component({ selector: 'app-dialog-container', template: '', styles: [''], }) export class DialogContainerComponent { constructor( private service: DialogService, private viewContainerRef: ViewContainerRef, ) { this.service.containerRef = this.viewContainerRef; } }1234567891011121314
-
新建一个全局的服务提供者，
interface IDialogRef {
id: any;
element: ComponentRef<any>;
}
@Injectable({
providedIn: 'root'
})
export class DialogService {
private dialogItems: IDialogRef[] = [];
public containerRef: ViewContainerRef;
constructor(
private injector: Injector,
) {
}
/**
* 加载loading
* @param option
* @returns loading 的id, 使用 remove(id: any) 进行关闭
*/
public loading(option?: DialogLoadingOption): any {
option = Object.assign({}, option, {
time: 2000,
closeable: true,
});
return this.createDailog(DialogLoadingComponent, option);
}
/**
* 创建组件
* @param component
* @param option
* @returns
*/
private createDailog<T>(component: Type<T>, option: any): any {
const dialogId = ++ DialogService.guid;
if (!this.containerRef) {
return;
}
const dialogInjector = new DialogInjector(new DialogPackage(option, dialogId), this.injector);
const dialogRef = this.containerRef.createComponent(component, {
injector: dialogInjector
});
this.dialogItems.push({
id: dialogId,
element: dialogRef
});
return dialogId;
}
/**
* 删除组件
* @param i
*/
private removeAt(i: number) {
const item = this.dialogItems[i];
this.dialogItems.splice(i, 1);
const dialogRef = item.element;
dialogRef.destroy();
}
}12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
作为对比，ViewContainerRef.createComponent 比 ComponentFactoryResolver 使用更简单，而且更符合 angular 特色
constructor(
private resolver: ComponentFactoryResolver,
private applicationRef: ApplicationRef,
private injector: Injector,
@Inject(DOCUMENT) private document: Document,
) { }
// 添加组件
const dialogFactory = this.resolver.resolveComponentFactory(component);
const dialogRef = dialogFactory.create(dialogInjector);
this.applicationRef.attachView(dialogRef.hostView);
this.document.body.appendChild(dialogRef.location.nativeElement);
// 删除组件
this.applicationRef.detachView(dialogRef.hostView);
this.document.body.removeChild(dialogRef.location.nativeElement);
this.dialogItems.splice(i);12345678910111213141516171819
- 在组件内部实现删除功能
export class DialogMessageComponent implements OnDestroy {
constructor(
private data: DialogPackage<DialogMessageOption>,
private service: DialogService,
) {
}
@HostListener('click')
public close() {
this.service.remove(this.data.dialogId);
}
}12345678910111213
- 以模块的方式提供
@NgModule({
imports: [
CommonModule,
],
declarations: [
...COMPONENTS
],
exports: [
...COMPONENTS
],
})
export class DialogModule {
static forRoot(): ModuleWithProviders<DialogModule> {
return {
ngModule: DialogModule,
providers: [
DialogService
]
};
}
}123456789101112131415161718192021
- 使用
第一步，在 app.module.ts 中导入
DialogModule.forRoot(),1
第二步，在 app.component.ts 页面中添加容器
<app-dialog-container></app-dialog-container>1
第三步，使用
constructor(
private toastrService: DialogService) {
this.toastrService.loading();
}1234
总结
ViewContainerRef.createComponent 比 ComponentFactoryResolver 使用更简单，而且更符合 angular 特色，始终保持所有创建的内容在框架内。
完整代码请查看 Angular-ZoDream
转载请保留原文链接： https://zodream.cn/blog/id/231.html