注入动态创建的组件时,Angular ActivatedRoute数据不变

时间:2019-05-16 19:01:49

标签: angular

我的Angular应用程序包含一个主视口和一个右侧面板,该面板位于主视口之外。单击主视口中的某些内容会导致此右侧面板打开/关闭,我正在使用ComponentFactoryResolver中的@angular/core,以便动态创建面板组件并向其提供数据。到目前为止,这一切都很好,但是我最近注意到,当我尝试将ActivatedRoute注入这些组件的ctor时,初始实例工作正常,并且可以按预期获得路线数据。但是,如果我从另一个上下文将应用程序旋转到同一视图(例如,我从URI中的顺序A转到顺序B,这将触发重新创建我的所有路线)并检查ActivatedRoute数据,保存路径数据的BehaviorSubject的值不变。

这对于除常规<router-outlet>之外的常规组件来说似乎很好用,但是这些动态创建的组件似乎从未更新过。

我已经确认ngOnDestroy()方法正在运行时组件已被销毁,每次我转到新顺序时都会再次调用ctor。

关于动态创建的组件,必须有一些特殊之处,导致其无法正常工作。您是否应该能够将ActivatedRoute注入到不是由路由器创建的组件中?如果是这样,那不是理想的选择,但是我可以找到其他方法来解决它。

编辑

这是我用来渲染组件的代码

render(component: PanelViewPackage, outlet: PanelViewportOutlet): ComponentRef<any> {

    outlet.viewContainerRef.detach();

    if (!component.hasState()) {
      let componentFactory = this._componentFactoryResolver.resolveComponentFactory(component.Config.Component);

      let componentRef = outlet.viewContainerRef.createComponent(componentFactory);

      // There seems to be 2 ways to create this component... is one way better than the other?
      // let componentRef = componentFactory.create(outlet.viewContainerRef.parentInjector);

      (<PanelViewportComponentBase<any>>componentRef.instance).applyResolve(component.Config.Resolver);
      (<PanelViewportComponentBase<any>>componentRef.instance).applyRejector(component.Config.Rejector);
      (<PanelViewportComponentBase<any>>componentRef.instance).applyData(component.Config.Data);

      return componentRef;

    } else {
      let componentRef = component.getComponentRef();
      outlet.viewContainerRef.insert(componentRef.hostView);

      return componentRef;
    }
  }

0 个答案:

没有答案