Angular中的变量和点之间有多余的空间，如何清理？

Question

我的 Angular html 模板中有一个带有ng-container的条件块。 渲染的 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  <!----> <!---->  <!----><!----> <!---->&amp; <!----><!---->Speed reading  <!----> <!---->   .</span> 
   <span jhitranslate="businesslogic.shop.subscription.platform">Platform Subscription.</span> 
</div>

为什么我在...阅读和点之间有空格？

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>

output 是：

<div> <!----> <!----><!---->Mental arithmetics  <!----> <!---->  <!----> . <span jhitranslate="businesslogic.shop.subscription.platform">Platform Subscription.</span> </div>

Answer 1

问题在于span是一个内联元素。 这就是解析器保留每个空格的原因。

因此，每个新行、制表符和空格都会被修剪成 1 个空格。

尝试使用其他元素，如 div 左右。

这是消除空格的代码的当前版本。