Html 将绑定在其父级之外的组件移动

在我的项目中，我正在设计一些覆盖层的样式。由于嵌套组件结构，我在这里遇到了一些问题。预期的解决方案是将覆盖移动到更靠近应用程序根的位置，同时保留数据绑定，从而减少css样式的限制

我已经设法使用

Renderer2.appendChild（…）

建立了一个原型。显示覆盖时，覆盖的

ngOnInit

会将覆盖附加到另一个DOM元素

使用我当前的代码，我可以通过移动直接在覆盖前找到的空注释

来获得输入或输出绑定（但不能同时获得两者）

根据我的理解（）Angular需要这个注释，但是

renderr2.appendChild

并没有考虑到它（可能它并不用于组件，只用于“原始”html？）

---

演示：

以下是我一直关注的两个问题的原型：

覆盖层的可见性（显示在标签下方）可以通过按钮进行切换。覆盖层内的提交按钮使用

@Output

事件发射器将输入记录到控制台。按change text可更改

@Input

属性

在不移动覆盖的情况下，输入和输出绑定可以像预期的那样工作

不正确的输入绑定：如果我选择将空的

注释与覆盖一起移动，我的输入绑定似乎会停止工作。按“更改文本”不会更改传递给组件的随机数。在这种情况下，输出绑定仍然可以正常工作

不正确的销毁：如果我不移动空注释，Angular将无法在使用“切换可见性”按钮隐藏可见性时清理组件。也就是说，当组件处于活动状态时，输入和输出绑定都保持功能

---

如果有人知道如何使这项工作，我将非常感谢一些帮助。我确实看到过使用factory解析器和分离视图创建覆盖，但是能够移动组件，同时在HTML模板中保留绑定，这将为我们节省大量时间，否则我们将花费在更改大量组件上

编辑：我忘记提到错误

错误：未能在“节点”上执行“removeChild”：要删除的节点不是此节点的子节点。

在尝试删除覆盖而不删除移动的注释时发生。Angular正在尝试从覆盖中删除一个

#comment

元素，但由于该注释仍在覆盖模板所在的div中，因此无法执行此操作。这就是我试图将注释与覆盖一起移动的原因