@libs-ui/services-translate 0.2.355-9 → 0.2.356-0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +137 -2
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,3 +1,138 @@
|
|
|
1
|
-
#
|
|
1
|
+
# LibsUiTranslateService
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Dịch vụ quản lý đa ngôn ngữ (i18n) cho project, mở rộng từ `@ngx-translate/core` với các tính năng đặc thù:
|
|
4
|
+
|
|
5
|
+
- **Tích hợp MessageFormat**: Hỗ trợ plural rules, select statements phức tạp.
|
|
6
|
+
- **Global Interpolation**: Biến `{value}` dùng chung không cần truyền thủ công.
|
|
7
|
+
- **Merge từ source**: Tự động merge chuỗi dịch nội bộ(`data-translation.ts`) khi gọi `use()`.
|
|
8
|
+
- **Lưu ngôn ngữ**: Tích hợp `UtilsCache` để lưu lựa chọn ngôn ngữ vào localStorage.
|
|
9
|
+
|
|
10
|
+
## Cài đặt
|
|
11
|
+
|
|
12
|
+
```typescript
|
|
13
|
+
// app.config.ts
|
|
14
|
+
import { getConfigTranslate } from '@libs-ui/services-translate';
|
|
15
|
+
|
|
16
|
+
export const appConfig: ApplicationConfig = {
|
|
17
|
+
providers: [
|
|
18
|
+
getConfigTranslate(), // Load từ /i18n/*.json
|
|
19
|
+
getConfigTranslate('/assets/translations/'), // Đường dẫn tùy chỉnh
|
|
20
|
+
],
|
|
21
|
+
};
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Cấu trúc file ngôn ngữ
|
|
25
|
+
|
|
26
|
+
Đặt các file JSON tại `public/i18n/` (hoặc đường dẫn tùy chỉnh truyền vào `getConfigTranslate`):
|
|
27
|
+
|
|
28
|
+
```
|
|
29
|
+
public/
|
|
30
|
+
└── i18n/
|
|
31
|
+
├── vi.json
|
|
32
|
+
└── en.json
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
**Ví dụ `vi.json`:**
|
|
36
|
+
|
|
37
|
+
```json
|
|
38
|
+
{
|
|
39
|
+
"i18n_hello": "Xin chào",
|
|
40
|
+
"i18n_greeting": "Xin chào, {name}!",
|
|
41
|
+
"i18n_item_count": "{value} {value,plural, =0 {mục} =1 {mục} other {mục}}"
|
|
42
|
+
}
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## Inject translation từ Object (không cần file .json)
|
|
46
|
+
|
|
47
|
+
Phù hợp khi muốn đặt translation trực tiếp trong code (ví dụ: cho các key của thư viện dùng chung):
|
|
48
|
+
|
|
49
|
+
```typescript
|
|
50
|
+
import { TranslateService } from '@ngx-translate/core';
|
|
51
|
+
|
|
52
|
+
constructor() {
|
|
53
|
+
this.translate.setTranslation('vi', {
|
|
54
|
+
i18n_welcome: 'Chào mừng đến với hệ thống',
|
|
55
|
+
i18n_role: 'Vai trò: {role}',
|
|
56
|
+
}, true); // true = merge, không ghi đè keys từ file JSON
|
|
57
|
+
|
|
58
|
+
this.translate.setTranslation('en', {
|
|
59
|
+
i18n_welcome: 'Welcome to the system',
|
|
60
|
+
i18n_role: 'Role: {role}',
|
|
61
|
+
}, true);
|
|
62
|
+
|
|
63
|
+
this.translate.use('vi');
|
|
64
|
+
}
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## Sử dụng trong Template
|
|
68
|
+
|
|
69
|
+
```html
|
|
70
|
+
<!-- Dùng pipe -->
|
|
71
|
+
<span>{{ 'i18n_search' | translate }}</span>
|
|
72
|
+
|
|
73
|
+
<!-- Có interpolation params -->
|
|
74
|
+
<span>{{ 'i18n_greeting' | translate: { name: 'Admin' } }}</span>
|
|
75
|
+
|
|
76
|
+
<!-- Plural (MessageFormat) -->
|
|
77
|
+
<span>{{ 'i18n_item_count' | translate: { value: 5 } }}</span>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
## Sử dụng trong Component
|
|
81
|
+
|
|
82
|
+
```typescript
|
|
83
|
+
import { TranslateService } from '@ngx-translate/core';
|
|
84
|
+
|
|
85
|
+
export class MyComponent {
|
|
86
|
+
private translate = inject(TranslateService);
|
|
87
|
+
|
|
88
|
+
// Sync
|
|
89
|
+
get label() {
|
|
90
|
+
return this.translate.instant('i18n_search');
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
// Async (reactive)
|
|
94
|
+
label$ = this.translate.get('i18n_search');
|
|
95
|
+
|
|
96
|
+
// Chuyển ngôn ngữ
|
|
97
|
+
switchLang(lang: string) {
|
|
98
|
+
this.translate.use(lang);
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
## Global Interpolation
|
|
104
|
+
|
|
105
|
+
Dùng để inject biến dùng chung (tên thương hiệu, hotline...) vào **tất cả** chuỗi dịch:
|
|
106
|
+
|
|
107
|
+
```typescript
|
|
108
|
+
import { setInterpolateParamDefault } from '@libs-ui/services-translate';
|
|
109
|
+
|
|
110
|
+
// Thường đặt ở app.component.ts
|
|
111
|
+
setInterpolateParamDefault({
|
|
112
|
+
brand: 'Mobio CRM',
|
|
113
|
+
hotline: '1900 1234',
|
|
114
|
+
});
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
Trong file dịch:
|
|
118
|
+
|
|
119
|
+
```json
|
|
120
|
+
{
|
|
121
|
+
"i18n_contact": "Liên hệ {brand} qua hotline {hotline}"
|
|
122
|
+
}
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
Kết quả: `"Liên hệ Mobio CRM qua hotline 1900 1234"` — không cần `| translate: { brand: '...', hotline: '...' }`.
|
|
126
|
+
|
|
127
|
+
## MessageFormat — Plural & Select
|
|
128
|
+
|
|
129
|
+
```json
|
|
130
|
+
{
|
|
131
|
+
"i18n_items": "{value} {value,plural, =0 {mục} =1 {mục} other {mục}}",
|
|
132
|
+
"i18n_status": "Trạng thái: {status,select, active {Hoạt động} inactive {Không hoạt động} other {Không xác định}}"
|
|
133
|
+
}
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
## Demo
|
|
137
|
+
|
|
138
|
+
Xem chi tiết và test interactive tại: [http://localhost:4500/services/translate](http://localhost:4500/services/translate)
|
package/package.json
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/services-translate",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.356-0",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/common": ">=18.0.0",
|
|
6
6
|
"@angular/core": ">=18.0.0",
|
|
7
7
|
"@ngx-translate/core": "^15.0.0",
|
|
8
8
|
"ngx-translate-messageformat-compiler": "^7.0.0",
|
|
9
9
|
"@ngx-translate/http-loader": "^8.0.0",
|
|
10
|
-
"@libs-ui/utils": "0.2.
|
|
10
|
+
"@libs-ui/utils": "0.2.356-0",
|
|
11
11
|
"rxjs": "~7.8.0",
|
|
12
|
-
"@libs-ui/interfaces-types": "0.2.
|
|
12
|
+
"@libs-ui/interfaces-types": "0.2.356-0"
|
|
13
13
|
},
|
|
14
14
|
"sideEffects": false,
|
|
15
15
|
"module": "fesm2022/libs-ui-services-translate.mjs",
|