问题描述
我有一个组件,我只想实例化一次,并通过将其动态插入DOM来重用它。我的用例是显示具有大型自定义组件或第三方组件的模态,这些组件具有“重新加载”方法(例如ng2-pdfjs-viewer)。
我有一个stackblitz demo,其中我有一个component.service
来处理动态组件的实例化和缓存,但是它只能工作一次……第二次它不会呈现任何内容。
@Injectable({ providedIn: "root" })
export class ComponentService {
private cache;
constructor(
@Inject(ComponentFactoryResolver)
private factoryResolver: ComponentFactoryResolver,private injector: Injector
) {}
addDynamicComponent(viewContainerRef): ComponentRef<HelloComponent> {
const component = this.getComponent();
viewContainerRef.insert(component.hostView);
return component;
}
private getComponent(): ComponentRef<HelloComponent> {
if (!this.cache) {
const factory = this.factoryResolver.resolveComponentFactory(
HelloComponent
);
const component = factory.create(this.injector);
this.cache = component;
}
return this.cache;
}
}
组件本身模拟显示“模态”。
<div *ngIf="show">
<ng-container #ref></ng-container>
</div>
<button (click)="toggle()">Toggle</button>
export class AppComponent {
show = false;
@ViewChild("ref",{ read: ViewContainerRef }) ref: ViewContainerRef;
toggle() {
this.show = !this.show;
if (this.show) {
setTimeout(() => {
this.componentService.addDynamicComponent(this.ref);
});
}
}
constructor(private componentService: ComponentService) {}
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)