Question

从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，并且会连续显示而不包裹。 / p>

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

这具有未渲染的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甚至只是一个空格，那么我得到的正是我想要的结果。

我怀疑已将其更改以解决某处的某些问题，但是有人对我如何获得预期的结果有任何建议吗？

Answer 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 {
    ...

有关更多信息，请参见：

文档：https://angular.io/api/core/Component#preserveWhitespaces

说明：http://thomasgassmann.net/whitespace-handling-in-angular-6/

Answer 2

即使在我单击“问您的问题”之前，这里的人也给了我解决方法。

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

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

从ng-container内容中剥离的空白字符

2 个答案: