Angular Elements WebComponents 外部 DOM 變化

Question

TL;DR ：刪除使用 Angular Elements 創建的自定義 Element 的 DOM Element 將導致子路由器不加載組件

首先，代碼在 Github上可用。

遺憾的是，我沒有運行 stackblitz 版本，但在本地，克隆后，npm install 和 ng serve 應該可以正常運行。

關於一般結構：

該項目展示了一個由 Angular 應用程序通過 Elements 公開的 WebComponent 示例。 在 index.html 中使用 WebComponent，稱為容器應用程序。 這里的用例有點構造，但是當點擊兩個頂部底部時發生的導航與現實世界的用例相當。

通常這個 WebComponent 會在 AngularJS 遺留應用程序中使用。 由於兩個根視圖（overview1 概覽2）之間存在許多重疊，因此它被用於兩個 AngularJS 組件中，在 ui-router 處理導航之間。 這意味着，正是這種構造的動作發生了。 DOM 元素將被刪除並重新添加。

所以基本上問題是：

如果我從外部刪除 WebComponent 的 DOM 元素（因此刪除 CustomElement 本身），然后使用另一個路由重新添加它，則不會加載該子路由組件。 如果有很短的延遲（50 毫秒），則一切正常。

要重現問題：

1. 加載頁面並單擊“延遲切換”按鈕。
2. 顯示細節組件
3. 再次單擊“延遲切換”切換到另一個概覽。
4. 顯示細節組件

=> 一切正常

重復同樣的步驟，但這次只點擊“直接切換”。

事先調查

我已經調試的是路由器。 所以我通過“啟用跟蹤”瀏覽了日志消息，它們似乎沒有區別。 之后我比較了組件的生命周期，我注意到，在工作示例中，舊的Detail**1**Component對象將被銷毀，一個新的Detail**1**Component將被創建並在之后直接銷毀，然后關於Detail**2**Component所有內容都將被構建。

在不工作的示例中，它是這樣的：一個新的Detail**1**Component將再次構建並隨后銷毀。 然后舊的Detail**1**Component將被銷毀。 然后就不會構造Detail**2**Component 。

所以路由似乎工作正常，但在這種情況下組件不會被加載，可能是由於一個奇怪的生命周期，因為由於在 DOM 中硬刪除那些 WebComponent 而發生了 View 與 ViewModel 的分離。

也許我只是愚蠢並且做了一些根本錯誤的事情，但是我在網絡上找不到關於這個問題的任何內容，我自己嘗試的每個解決方案都導致了一種解決方法，例如建立延遲。

Answer 1

您可以在 Github 上找到可用的解決方法。 我通過將一個布爾值附加到導航按鈕來強制重新創建 DOM 對象，這將確定是否應該實際顯示 DetailComponent。

<router-outlet *ngIf="shown">

然后 Outlet 將被重新評估，DOM 將在單擊按鈕時重新填充。 這將有效地減輕所描述的問題。 在我看來，它不是最干凈的解決方案，但比超時更干凈，甚至需要從外部應用。 我希望這會有所幫助，也許有人可能會指出實際的修復方法，而不僅僅是解決方法。

由於這是我的第一個問題，請不要猶豫給我關於正式外觀的反饋。