Конфигурируемые модули Angular

Используется шаблон forRoot (метод может называться как угодно, но принято называть forRoot). Он принимает в качестве параметра объект конфигурации модуля.

/**
 * Интерфейс конфигурации модуля
 */
interface UserServiceConfig {
  userName: string;
}

const USER_CONFIG_TOKEN = new InjectionToken<UserServiceConfig>('unique.string.for.config');

Объект заворачивается в провайдер значения, который можно использовать как любой другой провайдер через механизм внедрения зависимостей.

Конфигурируемый модулем сервис user.service.ts

@Injectable()
export class UserService {
  private _userName = 'Sherlock Holmes';

  constructor(@Inject(USER_CONFIG_TOKEN) config: UserServiceConfig) {
    this._userName = config.userName;
  }

  hello() {
    return this._userName + ' say hello!';
  }
}

Конфигурируемый модуль greeting.module.ts

@NgModule({
  imports:      [ CommonModule ],
  declarations: [ GreetingComponent ],
  exports:      [ GreetingComponent ]
})
export class GreetingModule {
  // необязательный шаблон для уникальности импорта модуля
  constructor (@Optional() @SkipSelf() parentModule: GreetingModule) {
    if (parentModule) {
      throw new Error(
        'GreetingModule is already loaded. Import it in the AppModule only');
    }
  }

  /**
   * Метод который будет вызван когда модуль импортиться в root модуле
   * @param config - конфигурация, в данном случае задается имя пользователя
   */
  static forRoot(config: UserServiceConfig): ModuleWithProviders {
    return {
      ngModule: GreetingModule,
      providers: [
        { provide: USER_CONFIG_TOKEN, useValue: config } // <=== провайдер
        UserService,
      ]
    };
  }
}

Использование

app.module.ts

@NgModule({
  imports: [
    BrowserModule,
    GreetingModule.forRoot({ userName: 'Spider Man' }),
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Похожие записи

let-* $implicit in Angular template

Синтаксис let-* позволяет объявить переменную в шаблоне , использования ключа $implicit позволяет устанавливать значение по-умолчанию для объявленной переменной.

29 августа 2018 г. в Angular

Angular Storybook

Установите пакет npm i @storybook/cli -g и запустите команду sb init в корне angular проекта.

30 октября 2018 г. в Angular