如何在DOM中調用組件以外的其他位置呈現組件

Question

在過去的JavaScript中，我們經常將帶有ID或類的DOM元素放置在我們想要某些功能的位置，然后使用全局JavaScript代碼將該功能動態地注入到每個功能中。

這允許將功能注入到DOM中所需的位置，而不管腳本調用它的位置如何。

當然，今天我們已經擺脫了這種范例，特別是隨着Angular 2/4的問世。 這就是我遇到的一個小問題。 我需要一種在選擇器標記插入DOM之外的地方渲染Angular 2/4組件的方法。

具體地說，這樣我就可以絕對定位彈出窗口，而沒有其他相對定位的父元素影響定位。 不幸的是，我沒有權力確保沒有任何父元素具有相對位置，否則我只會采用這種方法。 遺憾的是，沒有CSS方法可以忽略相對定位的父元素。

有沒有辦法讓Angular在DOM中的特定位置為給定元素注入模板？ 在這種情況下，無論選擇器標簽在DOM中位於何處，我都希望將其直接加載到頁面的內容部分中或緊接在結束body標簽之前。

我查看了DynamicComponentLoader ，但是似乎已經棄用了。 看起來很有希望，但我找不到其他選擇。 有人可以指出我的方向嗎？ 哪有一個？

Answer 1

最簡單的方法是在主應用程序組件中包含一個組件，並讓其接受輸入以顯示或隱藏可以傳遞的代碼示例：

https://stackblitz.com/edit/angular-dcst8j

根據您的需求，您可以使其更加復雜。 最終，如果您最終使用了更大的應用程序，那么最好考慮一種狀態管理策略來處理復雜的狀態管理： https : //bertrandg.github.io/angular2-application-state-management-strategy/我個人選擇使用ngrx [ https://github.com/ngrx/platform] 。 我看到很多行業都在朝着Redux和Redux風格的舞台管理發展。 有很多選擇。