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 左右。

這是消除空格的代碼的當前版本。