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％的页面都是这些呈现的注释，而且动态生成页面也需要10秒钟。我没有计算，但我希望页面中有数以千计的无关评论行。因此，我希望摆脱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的示例，该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);

Check this plunker

如果没有DOM节点（ng-container没有注释），Angular没有任何DOM节点作为锚点。

没有评论的替代ng-container？

1 个答案: