html - 將帶有綁定的元件移出其父元件之外

在我的專案中，我正在處理一些浮層的樣式。因為組件結構是巢狀的，我在這裡遇到了一些問題。預期的解決方案是將浮層移動到更接近應用程式根部的位置，同時保留數據綁定，使 CSS 樣式不那麼受限。

我已經成功使用 Renderer2.appendChild(...) 設置了一個原型。當覆蓋層顯示時，覆蓋層的 ngOnInit 會將覆蓋層附加到另一個 DOM 元素。

根據我目前的程式碼，我可以讓輸入或輸出綁定正常工作（但不能同時兩者都工作），這取決於將一個空註解 <!----> 放置在覆蓋層正前方的位置。

根據我的理解（Angular 應用中的空評論）Angular 需要這個評論，但 Renderer2.appendChild 並沒有考慮到它（也許它不打算用於元件，只用於『原始』 HTML？）。

示範：

這裡是展示我卡住的兩個問題的原型：https://stackblitz.com/edit/angular-pg24om

覆蓋層的可見性（顯示在標籤下方）可以使用按鈕切換。覆蓋層內的提交按鈕會使用 @Output 事件發射器將輸入記錄到控制台。按下更改文字會改變一個 @Input 屬性。

1. 在不移動覆蓋的情況下，輸入和輸出綁定如預期般運作。

2. 輸入綁定錯誤： 如果我選擇將空的 <!----> 註解與覆蓋層一起移動，我的輸入綁定似乎停止工作。按下 Change text 並不會改變我傳給組件的隨機數。在這種情況下，輸出綁定仍然正常運作。

3. 錯誤的銷毀：如果我不移動空的註解，當使用 Toggle visiblity 按鈕隱藏可見性時，Angular 無法清理元件。也就是說，當元件存在時，輸入和輸出綁定仍然保持功能。

如果有人知道如何讓這個運作，我將非常感激一些幫助。我確實看到過使用工廠解析器和分離視圖來創建覆蓋的方法，但能夠在保留 HTML 模板中的綁定的同時移動組件，將為我們節省大量原本需要用於更改許多組件的時間。

編輯：我忘了提到這個錯誤 Error: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. 會在嘗試移除沒有移動的評論的覆蓋層時發生。Angular 嘗試從覆蓋層中刪除一個 #comment 元素，但因為評論仍然在覆蓋層模板所在的 div 中，所以操作失敗。這就是我嘗試將評論與覆蓋層一起移動的原因。