在我的网络应用程序中,我有一个“条款和条件”弹出窗口,通过单击页脚中的链接打开(因此它是一个核心组件)。 弹出窗口由几个选项卡组成,每个选项卡都是一个相当大的模板文件。
我想知道是否可以将选项卡模板移动到单独的 block 并组织它们的延迟加载?我不确定我是否可以接受默认的 Angular 延迟加载,因为我不想为弹出窗口设置单独的路由。
最佳答案
您可以等待用户点击链接,一旦点击事件发生,就在 View 中加载所需的组件。 注意事项:
- 您需要为 View 中的组件定义一个占位符。
条款和条件组件需要定义为入门级组件,因为它是模块或使用它的模块。
entryComponents: [ ChildComponent ],
确保引用组件中的占位符并动态附加条款和条件组件。
<div> <ng-template #viewContainerRef></ng-template> </div>
和
@ViewChild('viewContainerRef', { read: ViewContainerRef }) VCR: ViewContainerRef;
并动态创建组件:
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;
}
这里有一个例子:https://add-or-remove-dynamic-component-parent-child.stackblitz.io
关于 Angular 5 : Lazy-loading of component without routing,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50648142/