从 ng-container 内容中删除的空白字符答案

【问题标题】：Whitespace characters stripped from ng-container content从 ng-container 内容中删除的空白字符
【发布时间】：2018-12-15 00:28:26
【问题描述】：

从 Angular 5 升级到 6 后，以下不再按预期呈现。

<ng-container *ngFor="let tag of tagModel">
    <span class="email-tag"><b>{{tag.tag}}</b> = {{tag.description}}</span>
</ng-container>

过去发生的情况是，这些标签会出现在一行上，直到它们到达末尾，然后在下一行继续（不会在标签中间中断）

我使用了ng-container，因为仅将ng-for 放在span 内不会在标记后添加CR/LF，并且会在不换行的情况下连续呈现。

但是，最新版本似乎删除了标签之间的所有空白字符，即使我手动添加它们，例如：

这具有未呈现的 HTML 编码 CRLF

<ng-container *ngFor="let tag of tagModel">
    <span class="email-tag"><b>{{tag.tag}}</b> = {{tag.description}}</span>
    &#13;&#10;
</ng-container>

<span> 元素之间有明确的换行符，但这些不会出现在呈现的输出中。

<ng-container *ngFor="let tag of tagModel">
    <span class="email-tag"><b>{{tag.tag}}</b> = {{tag.description}}</span>
    <span> </span>
</ng-container>

有一些样式可能是相关的，如下所示：

span.email-tag {
    margin: 1px;
    padding: 1px;
    white-space: nowrap;
}

如果我手动编辑 DOM 并添加一个 CRLF 甚至只是一个空格，我会得到我想要的结果。

我怀疑这已被更改以解决某个问题，但有人对我如何达到预期结果有任何建议吗？

【问题讨论】：

标签： css angular angular6

【解决方案1】：

Angular 6 默认启用空白优化。升级后，我注意到图标和文本之间的空格消失了。

您可以通过在 tsconfig.app.json 中设置 preserveWhitespaces 选项来全局覆盖它（如果您使用的是 Angular CLI）：

"angularCompilerOptions": {
    "preserveWhitespaces": true
}

或者基于每个组件，使用装饰器：

@Component({
    selector: 'floor-plan',
    templateUrl: './floor-plan.component.html',
    styleUrls: ['./floor-plan.component.scss'],
    preserveWhitespaces: true
})
export class FloorPlanComponent implements OnInit, OnDestroy {
    ...

解释：http://thomasgassmann.net/whitespace-handling-in-angular-6/

【讨论】：

【解决方案2】：

在我点击“问你的问题”之前，这里就有人给了我一个解决方法。

我所做的是在内容中添加一个零宽度的空间。出于某种原因（我非常感谢！）Angular 不会像现在使用空格那样从容器内容中删除它，因此输出按预期呈现。

<ng-container *ngFor="let tag of tagModel">
    <span class="email-tag"><b>{{tag.tag}}</b> = {{tag.description}}</span>
    &#8203;
</ng-container>

【讨论】：