Ah, that makes complete sense. Thank you!
I wonder, though: is there any ability to highlight the menu item for child routes? As in my example, we usually have /list and /detail child routes. It would be nice to be able to set a menu item "Page 1" with a path of "/module1/page1" and have it be marked as active if we're at either "/module1/page1/list" or "/module1/page1/detail".
Hi Liang Shiwei,
I tried to email you, but it was rejected by the mail server. I've sent the file as a Google Drive share instead.
Thanks
Hi maliming,
The Language Management module is a pro module which we don't have access to the source code for; the best I can do is use a decompiler to view an obfuscated version of the code and try to understand it.
Reviewing the decompiled code, it looks as if these classes are dependent on a LocalizationResourceBase being passed in, but I'm not sure if this is appropriate to my use case. We have a structure whereas our lookup tables (ex: Company Type, Lead Source, Tax Class, etc) store localization values in the database (see a demo ERD); in our example, each CompanyType record has one corresponding TextResource record with multiple TextResourceTranslations (one per supported culture). This is one example from a large list of lookup tables that we support.
In our ABP application we have a series of pages for each lookup that supports the creation of the lookup entity, text resource, and text resource translations. It's now our desire to be able to use the built-in localization engine to pull the correct translation from our database table utilizing the group & key values of the Text Resource table. Continuing our example of Company Type, this would be something like {{ 'CompanyTypes:Software' | abpLocalization }}.
I created a sample implementation of DynamicLocalizationResourceContributor and DynamicResourceLocalizer and walked through how it's called and it seems to only be called for classes in the code that have been marked as a resource file.
Can you provide any other guidance on implementing this requirement?
Sorry for the delay, I've been quite busy with competing priorities. I'll get you this test project as soon as I can, but wanted to check in and ensure this ticket doesn't get closed before I get a chance.
I'm reviewing the documentation for Localization and I'm not finding any information on how to create a custom localization provider. I thought I had seen this before, but can't find it now.
We're looking to continue using the existing out of box localization functionality, but we'd like to augment this to load resources from a custom table within our database. The intent is to be able to continue to use IStringLocalizer (L["<KEY>"]) on the server and abpLocalization pipe in angular to reference both out-of-the-box json-based resources and resources stored in our custom database table.
It looks like we're missing the forLazy() call from our module import, but it seems that's something we need to manually create on our modules and just looking at your link, I don't understand how to create this (in explanation, I don't understand what's happening in the forChild() call).
Here's an anonymized sample of how we've set things up (routes and module names changed to protect our client). Apologies if some of this is implemented strangely; our team is somewhat inexperienced with Angular.
Would this all work if we implemented and used forLazy() on all of our routing modules that do lazy loading?
/src/app/app-routing.module.ts
import { authGuard, permissionGuard } from '@abp/ng.core';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
// ... Removed default ABP routes
// Custom routes
{
path: 'module1',
loadChildren: () => import('./modules/module1/module1.module').then(m => m.Module1),
},
{
path: 'module2',
loadChildren: () => import('./modules/module2/module2.module').then(m => m.Module2),
},
{
path: 'module3',
loadChildren: () => import('./modules/module3/module3.module').then(m => m.Module3),
},
{
path: 'module4',
loadChildren: () => import('./modules/module4/module4.module').then(m => m.Module4),
},
];
@NgModule({
imports: [RouterModule.forRoot(routes, { bindToComponentInputs: true })],
exports: [RouterModule],
})
export class AppRoutingModule {}
/src/app/modules/module1/module1-routing.module.ts
import { NgModule } from '@angular/core';
import { permissionGuard } from '@abp/ng.core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{
path: '',
children: [
{
path: 'page1',
loadChildren: () => import('./module1/page1.module').then(m => m.Page1Module), // Has own routing that exposes child routes for CRUD operations (list, edit, create, update)
},
{
path: 'page2',
loadChildren: () => import('./module1/page2.module').then(m => m.Page2Module), // Has own routing that exposes child routes for CRUD operations (list, edit, create, update)
},
// ... snip ...
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class Module1RoutingModule { }
/src/app/route.provider.ts
import { RoutesService, eLayoutType } from '@abp/ng.core';
import { APP_INITIALIZER } from '@angular/core';
export const APP_ROUTE_PROVIDER = [
{ provide: APP_INITIALIZER, useFactory: configureRoutes, deps: [RoutesService], multi: true },
];
function configureRoutes(routes: RoutesService) {
return () => {
routes.add([
{
path: '/',
name: '::Menu:Home',
iconClass: 'fas fa-home',
order: 1,
layout: eLayoutType.application,
},
{
path: '/dashboard',
name: '::Menu:Dashboard',
iconClass: 'fas fa-chart-line',
order: 2,
layout: eLayoutType.application,
},
{
name: '::Menu:Module1',
order: 3,
iconClass: 'fa fa-gear',
layout: eLayoutType.application,
},
{
path: '/module1/page1',
name: 'M1P1',
parentName: '::Menu:Module1',
order: 1,
iconClass: 'fas fa-table',
layout: eLayoutType.application,
},
{
path: '/module1/page2',
name: 'M1P2',
parentName: '::Menu:Module1',
iconClass: 'fas fa-table',
order: 2,
layout: eLayoutType.application,
},
// ... snip ...
]);
};
}
In our Angular application we've defined our navigation items in src/app/route.provider.ts and defined our routes within src/app/app-routing.module.ts with additional child routes loaded from lazy-loaded modules referenced within it.
We're finding that items in the navigation menu that have sub-items don't stay open/expanded (as the out of the box Administration menu does) when visiting child routes. Possibly related, we note that the breadcrumbs rarely show the correct location either.
Are we missing something obvious here? Does this just not work with lazy-loaded routes?