Làm thế nào để giữ cho các nhà cung cấp góc cạnh của bạn không kết thúc bằng cách tiêm sai

Trong Angular, đăng ký nhà cung cấp tiêm phụ thuộc bằng cách sử dụng các chức năng đơn giản là một thông lệ phổ biến. Tuy nhiên, khi tạo các chức năng như vậy, điều quan trọng là phải xem xét mục đích sử dụng của chúng.

Chẳng hạn, Angular cung cấp một số chức năng như provideHttpClient(), provideRouter()và withDomHydration()các nhà cung cấp đăng ký dưới mui xe. Các chức năng này được thiết kế để sử dụng trong một bộ tiêm môi trường , chứ không phải trong một thành phần hoặc một bộ tiêm chỉ thị.

Giả sử bạn đang tạo một hàm giống như chức năng provideSvgIconsConfig()đăng ký nhà cung cấp cho cấu hình biểu tượng SVG. Nếu bạn sử dụng chức năng này trong một thành phần hoặc một bộ tiêm chỉ thị, bạn sẽ không thấy bất kỳ lỗi nào. Tuy nhiên, điều này có thể dẫn đến hành vi không mong muốn hoặc lỗi trong dòng.

export function provideSvgIconsConfig(config: Partial<SVG_CONFIG>) {
  return {
    provide: SVG_ICONS_CONFIG,
    useValue: config,
  };
}

      
                

                    
                    
                
            

Để minh họa điều này, hãy xem xét việc triển khai cập nhật bằng cách provideSvgIconsConfigsử dụng makeEnvironmentProviders:

import { makeEnvironmentProviders } from '@angular/core';

export function provideSvgIconsConfig(config: Partial<SVG_CONFIG>) {
  return makeEnvironmentProviders([
    {
      provide: SVG_ICONS_CONFIG,
      useValue: config,
    },
  ]);
}

Theo dõi tôi trên Medium hoặc Twitter để đọc thêm về Angular và JS!