解析 SAP Spartacus B2B list 实现,即list.component.html时,因为在Component 模板里遇到了[cxPopover]指令,因而触发依赖注入:

首先创立directive实例:

当点击宿主元素 icon 时,因为@HostListener 注解的起因,一旦宿主元素产生了 click 事件后,咱们定义在 directive 实现里的handleOpen办法会主动被调用:

下图标号为1的componentFactoryResolver,来自Popover directive 构造函数的依赖注入;

标号为2的PopoverComponent,来自咱们在另一个文件里实现并通过export 导出的Component:

标号为3的PopoverContainer,是this.viewContainer(同样是构造函数依赖注入的后果)调用 createComponent 返回的后果,其构造为:

this.popoverContainer.changeDetectorRef.detectChanges();

手动触发PopoverComponent的Change detection - 变更检测

而后调用handlePopoverEvents,执行事件处理注册逻辑:

更多Jerry的原创文章,尽在:"汪子熙":