如何在不更換原始網站內容的情況下在Angular 2中引導應用程序？

我並不是完全製作一個頁面的應用程序，但我寧願製作一個發佈組件的Angular應用程序，以便用戶只需在他們的網站上放置一個標籤，然後Angular應用程序就可以識別該標籤並相應地實現該組件。如何在不更換原始網站內容的情況下在Angular 2中引導應用程序？

比方說，我有一個角度的應用程序，只實現了一個組件test，並應儘可能放置組件在任何地方在頁面上：

<body> 
    ... 
    <test></test> 
    ... 
</body>

或者這樣：

<body> 
    <div> 
     ... 
     <test></test> 
     ... 
    </div> 
</body>

等等。

但是，如果我引導body DOM元素中的App模塊，則會替換body的全部內容。所以我需要的是在應用中實現一個Angular組件而不替換頁面的其他內容的方式。

我想一個正確的方法來做到這一點將是注入和操縱一些templateRef,elementRef或viewContainerRef，但我不知道哪一個確切是它，我該怎麼處理它們。

幫助感謝！

來源

2017-04-24 nakajuice

基本上問題與[this]類似（https://www.reddit.com/r/Angular2/comments/424nwn/using_angular_2_without_it_being_a_single_page_app/），但示例中的代碼已過時。 – nakajuice

雖然你可以爲你的頁面的一部分運行Angular，但你仍然需要爲角度定義你的DOM樹的整個部分 –

@Maximus沒有辦法解決它，就像在這個問題中問：http： //stackoverflow.com/questions/34993936/angular-2-it-is-possible-to-bind-the-app-component-in-existing-dom-without-era？因爲它在AngularJS中像魅力一樣工作，所以我覺得有點不開心，因爲現在我不能使用新的Angular，因爲它不能做AngularJS無需分叉並明確教授它的事情。 – nakajuice

有一個懸而未決的問題Transclusion for root component

參見

來源

2017-04-26 08:38:40

，張貼在評論你可能不希望使用Angular2/4在這種特定類型的應用程序中。如果您想在現有頁面中添加小塊，React可能是您正在查找的MVC。除此之外，您可能只想使用jquery或類似的代碼進行編碼。 Angular2/4並沒有真正的作爲已有的附加組件，而是用於大規模網絡應用程序開發（因此具有巨大的初始應用程序大小）。

如果你真的想要使用Angular2/4，那麼你需要將以前的代碼轉移到你的Angular Framework中。要麼將舊頁面轉移到您的Angular2/4框架中，要麼必須重寫您的Angular代碼。

對不起，因爲我確定這不是你希望聽到的答案。

來源

2017-04-27 17:52:48

不應該有一個巨大的初始應用程序大小。我沒有使用TypeScript，也無法真正說明，但是從前段時間的基準測試中可以看出，初始應用程序的大小並不是很大（至少在小型化，樹狀結構等方面正確構建時）並不是那麼重要。 –

與ember相比，它的框大小几乎是其大小的兩倍，相比之下，它的反應超過了五個（最後我檢查了rx，之前和angular4分離了動畫）。它還相對較小，不要誤解我的意思，但它仍然比其他MVC框架大得多。同時，隨着您獲得更大的代碼庫，它往往會更有效率（而更大的應用程序最終比其他MVC更小）。 –

如何在不更換原始網站內容的情況下在Angular 2中引導應用程序？

回答

相關問題