保持活动组件数据？ Angular和动态元件？

Question

所有代码都在这里：

https://stackblitz.com/edit/angular-keep-alive-component?file=src/app/app.component.ts

是否可以保留 state 输入以及组件何时更改？ 我正在使用动态组件-组件工厂解析器来渲染组件，但我想保留输入的值以及何时更改组件.....？

在 Vue.js 中存在 keep-alive 指令，但是否可以使用 Angular 9？

例如我需要什么：

渲染第一个组件 ->

输入任何示例 TEST DATA ->

更改组件第二个->

返回第一个组件并查看先前输入的“测试数据”

  public createComponent(component: number): void {
    const currentComponent = this.components[component];
    let componentFactory = this.componentFactoryResolver.resolveComponentFactory(
      currentComponent as any
    );
    let viewContainerRef = this.adHost.viewContainerRef;
    viewContainerRef.clear();
    let componentRef: any = viewContainerRef.createComponent(componentFactory);
    componentRef.instance.outputEventData.subscribe((val: Object | any) => {
      if (val) {
        this.sendFilter.emit(val);
      }
    });
    setTimeout(() => {
      componentRef.instance.destroyComponent.subscribe((val: any) => {
        if (val) {
          viewContainerRef.clear();
        }
      });
    }, 0);
  }
}

Answer 1

创建 dataService，在数据服务中创建 rxjs Subject ，在您的两个组件中注入 dataService，在第一个组件中订阅它，在您键入输入调用之后的第二个组件中调用subject.next(typeInput) ，数据将自动在您的第一个组件中更新订阅