使用 <template 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>

不过，我不明白为什么，也不知道这是错误还是功能。

Answer 1

就像@yurzui 说的那样，问题是 "preserveWhitespaces" 在组件中。

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

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

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

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

一个

<div *ngFor="...">

DOM 中没有尾随 space，这就是差异的来源。

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

使用 <template ngFor> 而不是 *ngFor 时出现奇怪的差距

Strange gap when using <template ngFor> instead of *ngFor

html

dart

angular-dart

angular