Question

我当前正在使用名为JQXDocking的第三方工具。它是一个非常简单直接的设计。在更深入地研究它之后，尽管我发现页面会变得很大，所以我将所有停靠的小部件抽象为自定义组件。

jqxDocking概念的问题在于它正在寻找div等。我破坏了设计，因为它不是我的直接子对象是div，而是我的自定义组件

// What it was
<jqxDocking>
<div><div>title</div><div>content</div></div>
</jqxDocking>

// What it is now.
<jqxDocking>
  <my-component></my-component>
</jqxDocking>

inside my-component has the proper dom structure that jqxDocking is looking for.  So i was hoping for a way to replace in markup correctly such that the component works.

由于DOM中的这一新层，父组件无法正确解释我的代码。

有没有办法创建自定义组件，但用模板html替换？

因此，如果我用div包装它，它将获得其实现的一部分

<jqxDocking>
  <div class=column">
    <div class="card">
      <my-component></my-component>
    </div>
  </div>
</jqxDocking>

但其标题未定义，因为它不理解组件中的标题。

所以我将其从组件中拉出

<jqxDocking>
  <div class="column">
    <div class="card">
      <div>Title</div>
      <my-component></my-component>
    </div>
  </div>
</jqxDocking>

所以我可以这样做，但是看起来并不那么好。我可能只需要在标记中将其模板化，而不是进行组件化。

Answer 1

为避免在输出HTML中包含my-component元素，可以将组件选择器定义为属性选择器：

selector: "[my-component]"

并在模板的容器元素上设置该属性：

<jqxDocking my-component></jqxDocking>

有关演示，请参见this stackblitz。

有没有办法用其内容替换dom中的组件？

1 个答案: