如何获取渲染组件的插槽名称

Question

我想创建一个高阶组件，它根据组件所在的插槽呈现不同。是否有任何服务可以让我获取组件在哪个插槽中呈现的信息？

Answer 1

您可以在您的自定义组件中注入祖先 PageSlotComponent 并通过访问其 public 属性 position$: Observable<string>:

来获取插槽名称

export class CustomComponent {
  constructor(@Optional() protected pageSlotComponent: PageSlotComponent) {}
  /*...*/

  slot$ = this.pageSlotComponent.position$;
}

解释：

在 Angular 中，您可以注入给定类型的最近父组件，方法是将其作为构造函数依赖项传递。
如果您打算在内容槽外使用您的组件（即作为静态组件），您可能需要添加 @Optional() 装饰器。这将有助于避免应用程序在运行时崩溃，但只会将 PageSlotComponent 实例安全地解析为 null。

如何获取渲染组件的插槽名称

How I can get the slot name in which the component is rendered

spartacus-storefront