Angular 5:无路由延迟加载组件 [英] Angular 5: Lazy-loading of component without routing

问题描述

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

我想知道是否可以将标签模板移动到单独的块并组织它们的延迟加载?我不确定默认的 Angular 延迟加载是否适合我，因为我不想为弹出窗口设置单独的路由.

解决方案

您可以等待用户点击链接，一旦点击事件发生，就在视图中加载所需的组件.需要注意的事项:

1. 您需要为视图中的组件定义一个占位符.

2. 条款和条件组件需要定义为入门级组件，用于其模块或使用它的模块.

    entryComponents: [子组件],

3. 确保引用组件中的占位符并动态附加条款和条件组件.

    
   <ng-template #viewContainerRef></ng-template>
   

和

@ViewChild('viewContainerRef', { read: ViewContainerRef }) VCR: ViewContainerRef;

并动态创建组件:

createComponent() {让 componentFactory = this.CFR.resolveComponentFactory(ChildComponent);让 componentRef: ComponentRef= this.VCR.createComponent(componentFactory);让 currentComponent = componentRef.instance;currentComponent.selfRef = currentComponent;//跟踪添加的组件，您可以重用此索引稍后将其删除currentComponent.index = ++this.index;//提供父组件引用以访问父类方法currentComponent.compInteraction = this;}

这里有一个例子:https://add-or-remove-dynamic-component-parent-child.stackblitz.io

In my web application I have a "Terms and Conditions" popup that opens by link click in the footer (so it's a core component). Popup comprises of several tabs, each of them is a pretty big template file.

I wonder if it's possible to move tab templates to separate chunk and organize their lazy-loading? I'm not sure if default Angular lazy-loading is acceptable for me because I don't want to have separate route for the popup.

解决方案

You can wait for the user to click on the link and as soon as Click Event occurs, load the required component in the view. Things to keep in mind:

1. You need to have a placeholder defined for the component in the view.

2. The terms and conditions component needs to be defined as Entry level component for it's Module or the module where it is used.

    entryComponents: [
       ChildComponent
     ],
   

3. Make sure to refer to the placeholder in your component and attach the terms and condition component dynamically.

     <div>
         <ng-template #viewContainerRef></ng-template>
      </div>
   

and

@ViewChild('viewContainerRef', { read: ViewContainerRef }) VCR: ViewContainerRef;

and create the component dynamically:

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;

}

there is an example for you here: https://add-or-remove-dynamic-component-parent-child.stackblitz.io

这篇关于Angular 5:无路由延迟加载组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！