使用<模板ngFor>代替*ngFor时的奇怪间隙

Question

让以下代码：

<template ngFor [ngForOf]="items" let-item>
            <li>
                <a class='dnp1-menu-link' [routerLink]="[item.route]">
                    <span>{{item.label}}</span>
                </a>
            </li>
</template>

和：

<li *ngFor="let item of items">
        <a class='dnp1-menu-link {{ item.domClass }}' [routerLink]="[item.route]">
            <span> {{item.label}} </span>
        </a>
</li>

我认为这两个片段会导致相同的行为，但是：

第一个片段结果：

​

第二个是：

​

这是意料之中吗？为什么？

我已经意识到原因是模板和跟随标记之间的"\n“，例如，这是有效的：

<template ngFor [ngForOf]="items" let-item><li>
    <a class='dnp1-menu-link' [routerLink]="[item.route]">
        <span>{{item.label}}</span>
    </a>
</li></template>

尽管如此，我还是不明白为什么，也不知道这是否是一个bug或特性。

Answer 1

正如@yurzui所说，问题在于组件中的"preserveWhitespaces“。

因为组件的默认行为是保留任何空白。

以下两个片段将产生两个不同的DOM：

<template><tag></tag></template>

<template>
    <tag></tag>
</template>

一个

<div *ngFor="...">

在DOM中没有尾随空间，这是差异的来源。

为了实现同样的行为，我们可以将preserveWhiteSpaces设置为false；