Angular 角度5:无路由的组件延迟加载

Angular 角度5:无路由的组件延迟加载,angular,angular5,lazy-loading,Angular,Angular5,Lazy Loading,在我的web应用程序中,我有一个“条款和条件”弹出窗口,通过点击页脚中的链接打开(因此它是一个核心组件)。 弹出窗口由几个选项卡组成,每个选项卡都是一个相当大的模板文件 我想知道是否有可能将选项卡模板移动到单独的块并组织它们的延迟加载?我不确定默认角度延迟加载是否可以接受,因为我不希望弹出窗口有单独的路径。您可以等待用户单击链接,并在单击事件发生后,在视图中加载所需的组件。 要记住的事情: 您需要为视图中的零部件定义一个占位符 条款和条件组件需要定义为其模块或使用模块的入门级组件 entryC

在我的web应用程序中,我有一个“条款和条件”弹出窗口,通过点击页脚中的链接打开(因此它是一个核心组件)。 弹出窗口由几个选项卡组成,每个选项卡都是一个相当大的模板文件


我想知道是否有可能将选项卡模板移动到单独的块并组织它们的延迟加载?我不确定默认角度延迟加载是否可以接受,因为我不希望弹出窗口有单独的路径。

您可以等待用户单击链接,并在单击事件发生后,在视图中加载所需的组件。 要记住的事情:

  • 您需要为视图中的零部件定义一个占位符
  • 条款和条件组件需要定义为其模块或使用模块的入门级组件

     entryComponents: [
        ChildComponent
      ],
    
  • 确保引用组件中的占位符并动态附加条款和条件组件

      <div>
          <ng-template #viewContainerRef></ng-template>
       </div>
    
    并动态创建组件:

    createComponent() {
    
        let componentFactory = this.CFR.resolveComponentFactory(ChildComponent);
        let componentRef: ComponentRef<ChildComponent> = this.VCR.createComponent(componentFactory);
        let currentComponent = componentRef.instance;
    
        currentComponent.selfRef = currentComponent;
      // to track the added component, you can reuse this index to remove it later
        currentComponent.index = ++this.index; 
    
        // providing parent Component reference to get access to parent class methods
        currentComponent.compInteraction = this;
    
    }
    
    createComponent(){
    让componentFactory=this.CFR.resolveComponentFactory(ChildComponent);
    让componentRef:componentRef=this.VCR.createComponent(componentFactory);
    让currentComponent=componentRef.instance;
    currentComponent.selfRef=currentComponent;
    //要跟踪添加的组件,可以重用此索引以在以后删除它
    currentComponent.index=+this.index;
    //提供父组件引用以访问父类方法
    currentComponent.compInteraction=此;
    }
    
    这里有一个例子:

    没有内置的特性来延迟加载组件,但您可以创建一个解决方案来实现这一点。问题是,这比仅仅使用已经支持的惰性模块进行路由要复杂得多。这是一篇关于这个主题的帖子:我找到了这本很棒的指南,
    createComponent() {
    
        let componentFactory = this.CFR.resolveComponentFactory(ChildComponent);
        let componentRef: ComponentRef<ChildComponent> = this.VCR.createComponent(componentFactory);
        let currentComponent = componentRef.instance;
    
        currentComponent.selfRef = currentComponent;
      // to track the added component, you can reuse this index to remove it later
        currentComponent.index = ++this.index; 
    
        // providing parent Component reference to get access to parent class methods
        currentComponent.compInteraction = this;
    
    }