Angular ngx-редактор аутсорсинг конфиг из app.component.ts в другой файл component.ts

Question

LiveDemo с кодом смотрите здесь https://stackblitz.com/edit/ngx-editor

В этом проекте вы можете увидеть в документе app.component.ts, что переменная editorConfig содержит конфигурацию редактора.

Я хочу передать эту переменную в файл, потому что я хочу загрузить другую конфигурацию в зависимости от цели использования.

Если я создаю компонент, страница не загружается. Как я могу создать ngx-config-component.ts, который содержит только переменную, и как я могу интегрировать эту конфигурацию после этого?

Большое спасибо за вашу помощь Кристоф

Answer 1

Я не очень понимаю, почему вам нужно разделить это на отдельный файл, но, вероятно, было бы лучше использовать механизм Angular Dependency Injection. Я сделал разветвление на stackblitz в качестве примера: https://stackblitz.com/edit/ngx-editor-ecaqtx

Я создал новый сервис в файле config.service.ts:

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

@Injectable()
export class ConfigService {
  editorConfig = {
    editable: true,
    spellcheck: false,
    height: '10rem',
    minHeight: '5rem',
    placeholder: 'Type something. Test the Editor... ヽ(^。^)丿',
    translate: 'no'
  };
}

Зарегистрировал его в app.module.ts:

...
import { ConfigService } from './config.service';

@NgModule({
  imports: [BrowserModule, FormsModule, HttpClientModule, NgxEditorModule],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent],
  providers: [AppService, ConfigService]
})
export class AppModule { }

А затем использовал его в app.component.ts:

...
import { ConfigService } from './config.service';
...

  constructor(private _appService: AppService, private _configService: ConfigService) { 
    this.editorConfig = _configService.editorConfig;
  }
...

Вы можете узнать больше о DI Angular здесь: https://angular.io/guide/dependency-injection

Другим подходом к проблеме может быть передача конфигурации в качестве аргумента данных с использованием углового маршрутизатора, чтобы вы могли иметь разные конфигурации, используя один и тот же компонент, только на разных маршрутах. Вы можете узнать больше здесь: https://angular.io/guide/router