角度使用頁面爲組件模板生成HTML

所以，我從AngularJS升級到Angular 2.我們不得不由於某些內部原因直接升級到4。角度使用頁面爲組件模板生成HTML

無論如何。我們有一些HTML部分需要在呈現之前由後端生成。所以，這顯然意味着我無法走靜態HTML或HTML文件的路線。我試圖用我最好的谷歌搜索技巧找到一個解決方案，但已經空了。

例如（PHP）：

<div id="appRoot"> 
    <div id="mainView"> 
<?php 
if ($user->isActive()) : 
    ?> 
     <p>Welcome, <?php print $user->getName(); ?>!</p> 
<?php 
else: 
    ?> 
     <p>Hello newbie!</p> 
<?php 
endif; ?> 
     <... begin main Angular Template ... > 
    </div> 
    <div id="sideContent"> 
     <... begin side Angular Template ... > 
    </div> 
</div>

它得到比這更復雜一點的地方，但是這是要點。有些模板的某些部分不會呈現，或者會使用不依賴於Angular應用程序但後端的不同值進行呈現。

我希望有辦法做到這一點，但我迄今爲止的搜索取得了鵝蛋。如果這是真的，它不能完成，我真的不明白爲什麼AngularJS方法中最通用的部分之一被刪除。

無論如何，任何幫助將不勝感激。

編輯：充實了一些例子。

來源

2017-06-07 Josh England

最後，我們想要做的並不是真的可能。我們需要解決的具體情況是讓用戶有多個可能的根元素進行交互，但我們不想公開用於確定元素是否應顯示給最終用戶的邏輯。

我們不得不採用一種輕微的hack-ish解決方案，利用每個元素的特定選擇器（即selector: "div#element1"）生成新的根組件。這是最廣泛使用的，顯然是用於解決這個特定問題的解決方案。顯然，Angular團隊知道這一點，他們是否將在未來處理它，目前尚不清楚。

最終的解決方案是找到頁面上需要根元素的所有元素，對它們進行迭代並分配唯一的選擇器（使用ID選擇器），然後向該列表添加一個帶有該選擇器的新組件類的組件引導。

即

const BOOTSTRAP_ELEMENTS: any[] = []; 
const DECLARATION_COMPONENTS: any[] = []; 
let elements = document.getElementsByClassName('.custom-elements'); 
elements.map(
    (index: number, element: Element) => { 
     let selector = 'custom-element#' + element.getAttribute('id'); 
     let component = getCustomComponentForSelector('.selector'); 
     BOOTSTRAP_ELEMENT.push(component); 
     DELCARATION_COMPONENTS.push(component); 
     element.className += selector; 
    } 
); 

@NgModule({ 
    ... 
    declarations: DECLARATION_COMPONENTS, 
    bootstrap: BOOTSTRAP_COMPONENTS, 
    ... 
}) 
export class MyModule {}

來源

2017-11-14 02:08:51

角度使用頁面爲組件模板生成HTML

回答

相關問題