Конфигурируемые модули 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 { }

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

Как добавить ng-bootstrap компоненты в проект Angular-CLI?

Покажу на примере нового проекта.

ng new project_name
cd project_name
npm install --save bootstrap@next
npm install --save @ng-bootstrap/ng-bootstrap

В angular-cli.json в секцию style надо добавить наш CSS, чтобы глобально подключить стили.

  "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
17 августа 2017 г. в Angular

Angular URL Matcher

Функция сопоставления маршрута с URL-адресами. Возможность динамически подбирать компонент для маршрута

04 октября 2020 г. в Angular

Вложенные формы Angular

Рассматриваются варианты встраивания форм, позволяющие переиспользовать набор полей вводе со своей логикой. @Input() родительской формы, @Output() дочерней формы, ViewChild(), ControlValueAccessor, ControlContainer