Bí KiếpBí Kiếp Lập Trình Angular

Giải pháp load cấu hình khi app init (P2)

0

Đọc đến phần 2 thì chắc các bạn đã phần nào đó xem qua phần 1 rồi đúng không? nếu phần 1 vẫn chưa là giải pháp mà các bạn cần thì tiếp theo đây chúng ta sẽ đi qua thêm một giải pháp nữa để các bạn có thể lựa chọn cho dự án của mình.

Mục đích sử dụng thì ở phần 1 mình có nói qua rồi nhé, bạn nào chưa đọc phần 1 thì sang đọc trước để nắm đầy đủ nội dung của topic này nhé.

Mình lười “quánh” lại đoạn bắt đầu quá nên ae xem đỡ hình mình cap màn hình từ P1 luôn nha =))

Ảnh lấy từ bài viết phần 1

Tóm lại là vào app > assets > tạo folder configs > tạo file app-configs.json > khai báo các config của các bạn vào.

Giải pháp

Giải pháp này mình sử dụng kết hợp APP_INITIALIZER InjectionToken với nhau. Bạn nào chưa biết APP_INITIALIZER để làm gì thì e lại Topic này ở P1 nhé, còn InjectionToken thì các bạn tham khảo thêm tại document của Angular cho chi tiết nha.

Điều chỉnh Interface AppConfiguration

Ở P1 mình đã hướng dẫn và giải thích interface này nên mình sẽ không nhắc lại trong bài viết này nữa nhé (Bạn nào chưa đọc P1 cũng có thể tiếp tục làm theo hình bên dưới là Ok nha). Mình sẽ bổ sung thêm một số thứ ở app-config.model.ts như sau:

  • Bổ sung thêm readonly cho các property => mục đích để chỉ cho phép các bạn get data mà không thay đổi (set) dữ liệu của property.
  • Import InjectionToken.
  • Khai báo một export const đặt tên là APP_CONFIGURATION => mục đích để có thể inject vào những nơi mình muốn sử dụng cấu hình.
export const APP_CONFIGURATION = new InjectionToken<AppConfiguration>('AppConfiguration');

Điều chỉnh Service

Tiếp tục, ở file app-configs.servic.ts các bạn điều chỉnh lại như sau:

  • configs => thay vì ở P1 chúng ta sử dụng static để sử dụng thì ở P2 này mình chỉ cần property này ở private để xử lý trong service thôi
  • Hàm getConfigs() => sử dụng để lấy dữ liệu của cấu hình
  • Hàm load() => thì vẫn như ở P1 được sử dụng để xử lý lấy dữ liệu cấu hình, nhưng đặc biệt ở đây mình sẽ sử dụng operator tap của rxjs để set dữ liệu vào property configs

Đoạn code ở hàm load()

if(this.configs)
  return of(this.configs).toPromise();

Các bạn có thể hiểu như sau: Lần đầu tiên app init sẽ vào hàm load() > sau đấy hàm sẽ check nếu configs đã có rồi thì chỉ cần return về dữ liệu đang có là được, còn nếu check thấy configsnull (tức chưa có dữ liệu hoặc chưa đọc cấu hình lần nào) thì chúng ta sẽ call để đọc cấu hình.

=> Tóm lại là mục đích của nó là để tránh gọi đi gọi lại để đọc cấu hình.

Điều chỉnh AppModule

app.module.ts mình cũng sẽ điều chỉnh lại một chút như sau:

  • initializeApp(startupService: AppConfigsService) => Function này mình vẫn giữ nguyên như ở P1
  • getConfigs(startupService: AppConfigsService) => Function này các bạn thêm vào để mình sẽ dùng lấy dữ liệu cấu hình nha, getConfigs này gọi đến function lúc nãy mình đã khai báo trong service đó nhé.
  • APP_INIT_PROVIDES => Vẫn giống ở P1 (Xem hình), các bạn khai báo thêm cho mình 1 provide với provide: APP_CONFIGURATION => APP_CONFIGURATION chính là InjectionToken mà chúng ta đã khai báo trong interface ở trên. (Chú ý là mình sẽ ko sử dụng multi: true nữa nhé)

Tiếp tục là khai báo providers ở phần @NgModule của AppModule

=> Tóm lại là bước này mục đích mình khai báo các providers cho app module để khi app init lên sẽ đọc cấu hình load()InjectionToken sẽ có nhiệm vụ là lấy cấu hình ra khi có một thằng nào đấy inject nó.

Cách sử dụng

Mình sẽ sử dụng thông qua InjectionToken bằng cách inject nó vào constructor như sau:

Demo & Code mẫu

Kết Luận

Qua 2 phần thì chắc các bạn cũng đã nắm rõ cách sử dụng APP_INITIALIZE, InjectionToken và một số kỹ thuật để load cấu hình khi app init. Mong là các bạn sẽ tìm được giải pháp mà mình ưng ý trong 2 phần của topic này. Sẽ có những phần sau nữa với những giải pháp có thể hay ho hơn các bạn nhớ theo dõi nhé.

Nếu bài viết có thiếu xót hoặc có góp ý gì thì các bạn hãy để lại bình luận để mình cải thiện bài viết nhé.

Cảm ơn các bạn đã theo dõi.

Giải pháp load cấu hình khi app init (P1)

Previous article
0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Login/Sign up
0
Would love your thoughts, please comment.x
()
x