[英]Surplus space between the variable and dot in Angular, how can I clean up it?
I have a condition block with ng-container
in my Angular html template.我的 Angular html 模板中有一个带有
ng-container
的条件块。 The rendered html contains unexplained space for me, how can I work it around?渲染的 html 包含无法解释的空间,我该如何解决?
The template part:模板部分:
<span>
<ng-container [ngSwitch]="languageService.currentLang">
<ng-container
*ngSwitchCase="'en'">{{accessSubscriptionPlan.subjects[0]?.nameEn}}
</ng-container>
<ng-container
*ngSwitchCase="'ru'">{{accessSubscriptionPlan.subjects[0]?.nameRu}}
</ng-container>
<ng-container
*ngSwitchCase="'tt'">{{accessSubscriptionPlan.subjects[0]?.nameTt}}
</ng-container>
</ng-container>
<ng-container *ngIf="accessSubscriptionPlan.subjects[1]">
<!--<a [routerLink]="['/subject', accessSubscriptionPlan.subject?.id, 'view']">{{accessSubscriptionPlan.subject?.name}}</a>-->
<ng-container [ngSwitch]="languageService.currentLang">&
<ng-container
*ngSwitchCase="'en'">{{accessSubscriptionPlan.subjects[1]?.nameEn}}
</ng-container>
<ng-container
*ngSwitchCase="'ru'">{{accessSubscriptionPlan.subjects[1]?.nameRu}}
</ng-container>
<ng-container
*ngSwitchCase="'tt'">{{accessSubscriptionPlan.subjects[1]?.nameTt}}
</ng-container>
</ng-container>
</ng-container>
.</span>
<span
jhiTranslate="businesslogic.shop.subscription.platform">Platform Subscription</span>
And the final html, that was generated is:最后生成的 html 是:
<div>
<span> <!----> <!----><!---->Mental arithmetics <!----> <!----> <!----><!----> <!---->& <!----><!---->Speed reading <!----> <!----> .</span>
<span jhitranslate="businesslogic.shop.subscription.platform">Platform Subscription.</span>
</div>
Why do I have spaces between...reading and dot?为什么我在...阅读和点之间有空格?
UPD. UPD。
I tried not to use span
, but I still us ng-container
and still getting the spaces:我尝试不使用
span
,但我仍然使用ng-container
并且仍然获得空格:
<div *ngIf="accessSubscriptionPlan.subjects[0]">
<!--<a [routerLink]="['/subject', accessSubscriptionPlan.subject?.id, 'view']">{{accessSubscriptionPlan.subject?.name}}</a>-->
<ng-container [ngSwitch]="languageService.currentLang">
<ng-container
*ngSwitchCase="'en'">{{accessSubscriptionPlan.subjects[0]?.nameEn}}
</ng-container>
<ng-container
*ngSwitchCase="'ru'">{{accessSubscriptionPlan.subjects[0]?.nameRu}}
</ng-container>
<ng-container
*ngSwitchCase="'tt'">{{accessSubscriptionPlan.subjects[0]?.nameTt}}
</ng-container>
</ng-container>
<ng-container *ngIf="accessSubscriptionPlan.subjects[1]">
<!--<a [routerLink]="['/subject', accessSubscriptionPlan.subject?.id, 'view']">{{accessSubscriptionPlan.subject?.name}}</a>-->
<ng-container [ngSwitch]="languageService.currentLang">&
<ng-container
*ngSwitchCase="'en'">{{accessSubscriptionPlan.subjects[1]?.nameEn}}
</ng-container>
<ng-container
*ngSwitchCase="'ru'">{{accessSubscriptionPlan.subjects[1]?.nameRu}}
</ng-container>
<ng-container
*ngSwitchCase="'tt'">{{accessSubscriptionPlan.subjects[1]?.nameTt}}
</ng-container>
</ng-container>
</ng-container>
.
<span
jhiTranslate="businesslogic.shop.subscription.platform">Platform Subscription</span>
</div>
and the output is: output 是:
<div> <!----> <!----><!---->Mental arithmetics <!----> <!----> <!----> . <span jhitranslate="businesslogic.shop.subscription.platform">Platform Subscription.</span> </div>
The problem is with that the span
is an inline element.问题在于
span
是一个内联元素。 That's why the parser keeps every white-space in it.这就是解析器保留每个空格的原因。
So every new line and tab and space will be trimed into 1 space.因此,每个新行、制表符和空格都会被修剪成 1 个空格。
Try using other element like div or so.尝试使用其他元素,如 div 左右。
Here is the current version of the code that eliminates the whitespaces. 这是消除空格的代码的当前版本。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.