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

Christoph Schöni спросил: 13 июня 2018 в 09:55 в: angular

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

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

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

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

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


1 ответ

Есть решение
Matija Hrženjak ответил: 13 июня 2018 в 10:45

Я действительно не понимаю, почему вам нужно разделить это на отдельный файл, но, вероятно, лучше всего использовать механизм затухания зависимостей Angular. В качестве примера я сделал вилку на 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 здесь можно узнать: https://angular.io/guide/ dependency-injection

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

Christoph Schöni ответил: 14 июня 2018 в 08:13
Привет, Матия Хрженяк, Большое спасибо за ваш быстрый ответ. Здорово знать, что тебе помогают. Почему, черт возьми, этот парень должен иметь конфигурацию в своем собственном файле? Не имеет смысла, если у вас есть компоненты. Проще говоря, у нас есть около трех стандартных конфигураций и отдельных конфигураций, которые, конечно же, сконфигурированы в соответствующем компоненте. Чтобы app.component.ts не был излишне заполнен, я хочу передать его на аутсорсинг. Большое спасибо Матии за вилку и ваше инвестированное время. приветствовать Кристофа

Дополнительное видео по вопросу: Angular ngx-редактор outsource config из app.component.ts в другой файл components.ts

Angular 2 Components

angular 4 project structure tutorial | Hindi | Lecture 4

StackBlitz - Online Code Editor For Angular and React - Introduction