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

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

Angular. Can't set breakpoints in VS Code

Вариант решения проблемы, когда не срабатывают точки остановки при разработке Angular приложений в редакторе VS Code
10 апреля 2018 г. в Angular

RxJs Subjects

Выдержки из доклада Андрея Алексеева (Tinkoff) про RxJs (Subject, Behaviour Subject, Replay Subject, Async Subject). Применение в Angular.

Angular routerLink conditionally

<a [routerLink]="myVar ? '/home' : null" routerLinkActive="is-active">Home</a>
or
<a [routerLink]="myVar ? ['/home'] : []">Home</a>