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

Posted 2023-05-08

【中文标题】有没有办法用它的内容替换我在 dom 中的组件？

【英文标题】：Is there a way to replace my component in dom with its contents?

【发布时间】：2019-07-22 11:31:16

【问题描述】：

我目前正在使用名为 JQXDocking 的第 3 方实用程序。它是一个非常简单直接的设计。尽管我认为页面会变得庞大，但在更深入地研究它后，我将所有停靠的小部件抽象为自定义组件。

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>

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

【问题讨论】：

如果将<my-component></my-component> 包裹在div 中会发生什么？

我最初尝试过。它使它像小部件一样可拖放，但它不了解在我的组件中定义的卡片标题。所以如果我继续抽象它最终会变成<div><div>title</div><my-component></my-component></div>，但是正如你所看到的，因为所有东西都有一个标题，并且所有东西都用一个 div 封装，我认为所有这些都可以是抽象的。

【参考方案1】：

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

selector: "[my-component]"

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

<jqxDocking my-component></jqxDocking>

请参阅this stackblitz 以获取演示。

【讨论】：

如何处理Input() 属性？它们会像平常一样应用于 jqxDocking，还是在您的示例中应用于 div？

可以在容器组件元素中绑定它们，如the updated stackblitz所示。

欧瑞卡。我将对其进行更多测试并清除它，但我认为这就是我正在寻找的答案。

这确实解决了基本问题。我能看到的唯一产生打嗝的是样式没有渗入组件。这是一件好事，但是父样式正在做诸如“jqx-window-content-dark”之类的事情，然后它下面的所有子div都被风格化了。由于从技术上讲内容仍然是它自己的组件，CSS 将无法解析。但这似乎是一个不同的问题

如果你对jqx CSS有控制权，可以在样式规则前加::ng-deep，影响子组件元素（见this answer）。