有没有办法用它的内容替换我在 dom 中的组件？

Question

我目前正在使用名为 JQXDocking 的第 3 方实用程序。这是一个非常简单且 straight-forward 的设计。虽然我认为页面会变得笨重，但在更深层次上研究它后，我将所有停靠的小部件抽象为自定义组件。

jqxDocking 概念的问题在于它正在寻找 divs 等。我打破了设计，因为不是直接的 child 是 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 中的这个新层，parent 组件无法正确解释我的代码。

是否可以创建自定义组件但替换为模板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

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

selector: "[my-component]"

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

<jqxDocking my-component></jqxDocking>

有关演示，请参阅 this stackblitz。

有没有办法用它的内容替换我在 dom 中的组件？

Is there a way to replace my component in dom with its contents?

typescript

jqxwidgets

angular