ng-container
我的Angular html 模板中有一个条件块。呈现的 html 包含对我来说无法解释的空间,我该如何解决?
模板部分:
<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>
最终生成的 html 是:
<div>
<span> <!----> <!----><!---->Mental arithmetics <!----> <!----> <!----><!----> <!---->& <!----><!---->Speed reading <!----> <!----> .</span>
<span jhitranslate="businesslogic.shop.subscription.platform">Platform Subscription.</span>
</div>
为什么我在 ...reading 和 dot 之间有空格?
UPD。
我试着不使用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>
输出是:
<div> <!----> <!----><!---->Mental arithmetics <!----> <!----> <!----> . <span jhitranslate="businesslogic.shop.subscription.platform">Platform Subscription.</span> </div>