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

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

第一个代码段结果：

和第二个：

这是预期的吗？为什么呢？

我已经意识到原因是＆＃34; \ n＆＃34;模板和跟随标签之间 例如，这有效：

<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”。

由于Components的默认行为是保留任何空格。

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

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

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

A

<div *ngFor="...">

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

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