沒有評論的ng-container的替代品？

Question

使用ng-container時，它會以HTML注釋的形式呈現：

<div>
    <ng-container>foo</ng-container>
<div>
will produce this kind of output :

<div>
    <!--template bindings={}-->foo
<div>

是否有ng-container的Angular替代方案，不會在HTML中產生注釋？ 我問b / c，我的應用程序從數據庫動態創建法律文檔，每個文檔長達幾十頁，並且每一頁上都有許多使用ng-container和ng-switch生成的組件。 當我查看HTML源代碼時，我看到90％的頁面是這些渲染的注釋，並且動態生成頁面最多需要十秒鍾。 我還沒有數，但我希望頁面中有成千上萬條無關的注釋行。 因此，我希望擺脫HTML中的所有混亂情況，並希望這也可以加快頁面生成。 盡管我的頁面是動態生成的，但生成后的結構不會改變。 例如，我不需要Angular可以返回並切換帶有標簽的文本輸入。 它是靜態的。

這是一個小代碼段，可讓您大致了解我的處理方式：

 <ng-container *ngFor="let ctrl of formTemplate"> <ng-container [ngSwitch]="ctrl.component"> <ng-container *ngSwitchCase="'textinput'"> <label *ngIf="!hasAttribute('nolabel', ctrl.attributes)" class="col-sm-2">{{ctrl.displayText}}</label> <ng-container *ngIf="!ctrl.readOnly"> <div *ngIf="hasAttribute('full', ctrl.attributes)" class="col-sm-10"> <input type="text" class="form-control" style="width:100%" [formControlName]="ctrl.key" /> </div> </ng-container> <ng-container *ngIf="ctrl.readOnly"> <ng-container *ngIf="hasAttribute('full', ctrl.attributes)"> <label class="col-sm-10" style="font-weight: 100">{{protocol[ctrl.objectName][ctrl.fieldName]}}&nbsp;</label> </ng-container> </ng-container> </ng-container> 

Answer 1

是否有ng-container的Angular替代方案，不會在HTML中產生注釋

Angular 需要在模板中具有一些DOM節點才能在其后插入元素。 如果是ng-container ，則為注釋。 與路由器一起，它是router-outlet 。 任何DOM節點都可以充當錨點。

這是使用本機DOM API的示例，顯示了Angular的功能：

const comment = document.createComment('ng-container - insert after me');
document.body.appendChild(comment);
const span = document.createElement('span');
span.textContent = 'I am inserted after comment';
document.body.insertBefore(span, comment.nextSibling);

檢查這個矮子 。

如果沒有DOM節點（對於ng-container則不加注釋），則Angular沒有任何DOM節點可充當錨點。