angular-如何缓存和重用动态创建的组件

如何解决angular-如何缓存和重用动态创建的组件

我有一个组件，我只想实例化一次，并通过将其动态插入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) {}
}