javascript - AEM/CQ : Conditional CSS class on decoration tag

Question

如何在 AEM6 Sightly 组件的包装装饰标签上动态设置 CSS 类？

我不能在组件上设置这个 CSS 类，因为它取决于组件的实例，我不能在资源上设置它，因为资源可以在多个页面上呈现，CSS 类因页面而异它是开着的。

我在 JavaScript Use-API 中尝试了以下 3 种技术但没有成功:

componentContext.getCssClassNames().add('test-class-1');
component.getHtmlTagAttributes().set('class', 'test-class-2');//throws an exception
currentNode.setProperty('cq:cssClass', 'test-class-3');

Answer 1

装饰标签是在组件实际呈现之前由过滤器(即 WCMComponentFilter)添加的，因此无法在组件代码中更改它。为了使用一些逻辑在此装饰器上动态设置 CSS 类，您需要创建一个自定义过滤器，它将在 WCMComponentFilter 之前运行，并为 IncludeOptions 设置适当的属性> 属性。

以下过滤器将 my-class 添加到 /content/geometrixx/en 下的所有轮播组件。

@SlingFilter(scope = SlingFilterScope.COMPONENT, order = -300)
public class DecoratorFilter implements Filter {

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        boolean addClass = false;
        if (request instanceof SlingHttpServletRequest) {
            final SlingHttpServletRequest slingRequest = (SlingHttpServletRequest) request;
            final Resource resource = slingRequest.getResource();
            final String resourceType = resource.getResourceType();
            final String resourcePath = resource.getPath();

            // put any custom logic here, eg.:
            addClass = "foundation/components/carousel".equals(resourceType)
                    && resourcePath.startsWith("/content/geometrixx/en");
        }
        if (addClass) {
            final IncludeOptions options = IncludeOptions.getOptions(request, true);
            options.getCssClassNames().add("my-class");
        }
        chain.doFilter(request, response);
    }