Chuyển đến nội dung chính

Đa ngôn ngữ trong Angular 

Trong phần này mình sẽ thêm chức năng đa ngôn ngữ cho project angular.
Chúng ta sử dụng thư viện @ngx-translate cho bài viết, bạn có thể tham khảo ở @ngx-translate 
Trước tiên chúng ta cần tạo project và import thư viện:

  • ng new angular-translate
  • cd angular-translate
  • npm install @ngx-translate/core --save
  • npm install @ngx-translate/http-loader --save

Sau đó chúng ta import thư viện TranslateModule vào app.module.ts:




-Tiếp đó chúng ta tao 2 file en.json và vn.json vào thư mục /assets/i18n/en.json


-Tiếp đó chúng ta thiết lập sự kiện click chuyển ngôn ngữ trong file app.component.ts:


- Để hiển thị trên giao diện, chúng ta sử dụng service TranslateService đã được khai báo trong contructor() như một pipe:


Kết quả :


Bằng việc truyền value vào event switchLanguage() chúng ta có thể thay đổi ngôn ngữ của trang




Như vậy chúng ta đã hoàn thành xong việc thêm chức năng đa ngôn ngữ vào trang web !!!

Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

  Giới thiệu về Spring Integration Giới thiệu      Spring Integration là một framework cho phép việc cấu hình động các tầng của hệ thống.  Nó giúp cho việc cấu hình linh động, dàn xếp các module trở nên độc lập, dễ dàng thay đổi phù hợp mục đích nâng cấp (xem hình 1 ) Hình - 1    Spring Integration cho phép nhắn tin giữa các module dựa trên Spring-based applications và nó hỗ trợ tích hợp với các hệ thông bên ngoài thông qua bộ khai báo. Mục đích chính của Spring Integration là cung cấp một mô hình đơn giản để xây dựng các giải pháp tích hợp doanh nghiệp trong khi vẫn duy trì cac mối liên kết cần thiết để có thể kiểm tra, bảo trì.    Nó đưa khái niệm về POJO lên thêm một bước nữa, nơi mà POJO được kết nối với nhau bằng cách sử dụng một mô hình nhắn tin và các thành phần riêng lẻ không thể nhận biết được các thành phần khác trong ứng dụng. Một ứng dụng được xây dựng bằng cách lắp ráp các thành phần, có thể tái sử dụng, tạ...
Đăng nhận xét
Đọc thêm
Get data from an API service in Angular  1. Promises và Observables  Promises:     Là một đối tượng được lập trình để thao tác bất đồng bộ trong Javascript. Nó đại diện cho một giá trị mà chúng ta muốn thao tác nhưng có thể hiện tại chưa có sẵn nhưng trong tương lại nó có giá trị trong promise đó. Một số đặc điểm của promise là: - Chỉ trả về một giá trị duy nhất, đó có thể là object, array, number.... - Không thể cancel được request - Được khởi tạo ngay mặc dù chưa được đăng ký, miễn là bạn khai báo một promise thì nó sẽ chạy contructor. Promise có ba trạng thái : Pending: khi khởi tạo đối tượng promise, gọi một request đến server. Fulfilled: thao tác gọi đến server thành công sẽ chuyển từ pending sang fulfilled qua phương thức then() (có thể xử lý kết quả thành công trong phương thức then() ). Rejected: khi request đến server bị lỗi, có thể dùng .catch() để bắt lỗi. Observables:     Tương tự như promise nhưng có mộ...
Đăng nhận xét
Đọc thêm