*ng如果为 False 时发表评论

Question

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

e.g.
<!---->

Answer 1

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

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

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

ng-template表示为EmbeddedView. 对于每个 EmbeddedView Angular 编译器都会创建 anchorDef如下元素：

element: {
   ns: null,
   name: null,

然后 Angular为具有名称的元素创建 Comment 节点null

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('');
    }

在开发模式下，Angular 还在该节点中存储绑定：

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 中的位置。