Merge pull request #22629 from abpframework/issue/22627

Angular - Fixing the navbar localization problem for the basic theme

npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.html

@@ -3,8 +3,7 @@
     <ng-container
       [ngTemplateOutlet]="isDropdown(route) ? dropdownLink : defaultLink"
       [ngTemplateOutletContext]="{ $implicit: route }"
-    >
+    />
-    </ng-container>
   }
 
   <ng-template #defaultLink let-route>
@@ -13,7 +12,7 @@
         @if (route.iconClass) {
           <i [ngClass]="route.iconClass"></i>
         }
-        {{ route.name | abpLocalization }}
+        {{ route.name | abpLazyTranslate | async }}
       </a>
     </li>
   </ng-template>
@@ -40,7 +39,7 @@
           @if (route.iconClass) {
             <i [ngClass]="route.iconClass"></i>
           }
-          {{ route.name | abpLocalization }}
+          {{ route.name | abpLazyTranslate | async }}
         </a>
         <div
           #routeContainer
@@ -48,9 +47,7 @@
           (click)="$event.preventDefault(); $event.stopPropagation()"
           [class.d-block]="smallScreen && rootDropdownExpand[route.name]"
         >
-          <ng-container
+          <ng-container *ngTemplateOutlet="forTemplate; context: { $implicit: route }" />
-            *ngTemplateOutlet="forTemplate; context: { $implicit: route }"
-          ></ng-container>
         </div>
       </li>
     }
@@ -61,7 +58,7 @@
       <ng-template
         [ngTemplateOutlet]="child.children?.length ? dropdownChild : defaultChild"
         [ngTemplateOutletContext]="{ $implicit: child }"
-      ></ng-template>
+      />
     }
   </ng-template>
 
@@ -105,7 +102,7 @@
         class="dropdown-menu dropdown-menu-start border-0 shadow-sm"
         [class.d-block]="smallScreen && dropdownSubmenu.isOpen()"
       >
-        <ng-container *ngTemplateOutlet="forTemplate; context: { $implicit: child }"></ng-container>
+        <ng-container *ngTemplateOutlet="forTemplate; context: { $implicit: child }" />
       </div>
     </div>
   </ng-template>

npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.ts

@@ -2,6 +2,7 @@ import { ABP, RoutesService, TreeNode } from '@abp/ng.core';
 import {
   Component,
   ElementRef,
+  inject,
   Input,
   QueryList,
   Renderer2,
@@ -15,6 +16,9 @@ import {
   templateUrl: 'routes.component.html',
 })
 export class RoutesComponent {
+  public readonly routesService = inject(RoutesService);
+  protected renderer = inject(Renderer2);
+
   @Input() smallScreen?: boolean;
 
   @ViewChildren('childrenContainer') childrenContainers!: QueryList<ElementRef<HTMLDivElement>>;
@@ -23,11 +27,6 @@ export class RoutesComponent {
 
   trackByFn: TrackByFunction<TreeNode<ABP.Route>> = (_, item) => item.name;
 
-  constructor(
-    public readonly routesService: RoutesService,
-    protected renderer: Renderer2,
-  ) {}
-
   isDropdown(node: TreeNode<ABP.Route>) {
     return !node?.isLeaf || this.routesService.hasChildren(node.name);
   }

npm/ng-packs/packages/theme-basic/src/lib/pipes/index.ts

@@ -0,0 +1 @@
+export * from './lazy-translate.pipe';

npm/ng-packs/packages/theme-basic/src/lib/pipes/lazy-translate.pipe.ts

@@ -0,0 +1,20 @@
+import { LocalizationService, ConfigStateService } from '@abp/ng.core';
+import { inject, Pipe, PipeTransform } from '@angular/core';
+import { Observable, filter, take, switchMap, shareReplay } from 'rxjs';
+
+@Pipe({
+  name: 'abpLazyTranslate',
+})
+export class LazyTranslatePipe implements PipeTransform {
+  private localizationService = inject(LocalizationService);
+  private configStateService = inject(ConfigStateService);
+
+  transform(key: string): Observable<string> {
+    return this.configStateService.getAll$().pipe(
+      filter(config => !!config.localization),
+      take(1),
+      switchMap(() => this.localizationService.get(key)),
+      shareReplay({ bufferSize: 1, refCount: true }),
+    );
+  }
+}

npm/ng-packs/packages/theme-basic/src/lib/theme-basic.module.ts

@@ -16,6 +16,7 @@ import { PageAlertContainerComponent } from './components/page-alert-container/p
 import { RoutesComponent } from './components/routes/routes.component';
 import { ValidationErrorComponent } from './components/validation-error/validation-error.component';
 import { provideThemeBasicConfig } from './providers';
+import { LazyTranslatePipe } from './pipes';
 
 export const LAYOUTS = [ApplicationLayoutComponent, AccountLayoutComponent, EmptyLayoutComponent];
 
@@ -48,6 +49,7 @@ export const LAYOUTS = [ApplicationLayoutComponent, AccountLayoutComponent, Empt
     NgbCollapseModule,
     NgbDropdownModule,
     NgxValidateCoreModule,
+    LazyTranslatePipe,
   ],
 })
 export class BaseThemeBasicModule {}

npm/ng-packs/packages/theme-basic/src/public-api.ts

@@ -6,6 +6,7 @@ export * from './lib/components';
 export * from './lib/enums';
 export * from './lib/handlers';
 export * from './lib/models';
+export * from './lib/pipes';
 export * from './lib/providers';
 export * from './lib/theme-basic.module';
 export * from './lib/tokens';