Question

我注意到当我有一个评估为false的* ngIf时，它会插入一个空白的HTML注释而不是元素有没有办法阻止它这样做？

e.g.
<!---->

Answer 1

正如评论中已经提到的，这是Angular编译器的一部分。

*ngIf是一个结构指令，可以扩展为

<ng-template [ngIf]="someValue"></ng-template>

ng-template由EmbeddedView表示。对于每个EmbeddedView角度编译器creates anchorDef，其元素如下：

element: {
   ns: null,
   name: null,

然后对null名称

的元素设置角度creates Comment node

export function createElement(view: ViewData, renderHost: any, def: NodeDef): ElementData {
  ...
  if (view.parent || !rootSelectorOrNode) {
    if (elDef.name) {
      el = renderer.createElement(elDef.name, elDef.ns);
    } else {
      el = renderer.createComment('');
    }

在开发模式下，此节点中的角度也为stores bindings：

function debugCheckAndUpdateNode(
    view: ViewData, nodeDef: NodeDef, argStyle: ArgumentType, givenValues: any[]): void {
      ...
      if (!elDef.element !.name) {
        // a comment.
        view.renderer.setValue(el, `bindings=${JSON.stringify(bindingValues, null, 2)}`);
      }

所以我们可以在渲染的DOM中看到类似这样的内容：

<!--bindings={
  "ng-reflect-ng-if": "true"
}-->

拥有这个注释节点的主要目的是使用angular知道嵌入式视图将放置在DOM中的位置。

* ngIf False时放置注释

1 个答案: