adobe - AEM：在多个组件中注入的通用组件如何具有动态价值

Question

我有一个通用组件，它通过 data-sly-resource 注入到多个组件中。

组分A

<div
  data-sly-resource="${ 'abc' @ resourceType = 'btplayer-cms/components/content/some-common-component' }">
</div>

组分B

<div
  data-sly-resource="${ 'xyz' @ resourceType = 'btplayer-cms/components/content/some-common-component' }">
</div>

在 some-common-component.html 中，需要将“类”添加到 div 中，该类将是动态的并且特定于注入它的组件。例如，当这个组件添加到 componentA 中时，html 会是： <div class="componenta-button"></div> 当添加到 componentB 中时，它将是<div class="componentb-button"></div>

我怎样才能做到这一点？我怎么知道谁在注入这个组件，或者可以从父组件发送额外的参数，我可以从 some-common-component.html 访问这些参数

标签： adobeaemsightlyaem-6

Answer 1

对于这个用例，最好使用HTL 模板：

<sly data-sly-use.common="common.html" data-sly-call="${common.myTemplate @ buttonClass='myClassA'}"></sly>