Angular ngx-editor 从其他 components.ts 文件中的 app.component.ts 外包配置

Question

带代码的LiveDemo请看这里 https://stackblitz.com/edit/ngx-editor

在这个项目中你可以在文档app.component.ts中看到变量editorConfig包含了编辑器的配置。

我想把这个变量外包到一个文件中，因为我想根据使用目的加载不同的配置。

如果我创建一个组件，页面不会加载。如何创建仅包含变量的 ngx-config-component.ts 以及之后如何集成此配置？

非常感谢您的帮助克里斯托夫

Answer 1

我真的不明白为什么你需要把它分成一个单独的文件，但最好使用 Angular 的依赖注入机制。我在 stackblitz 上做了一个 fork 作为例子：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;
  }
...

您可以在此处了解有关 Angular 的 DI 的更多信息：https://angular.io/guide/dependency-injection

解决该问题的另一种方法可能是使用 Angular 路由器将配置作为 data 参数传递，这样您就可以使用相同的组件进行不同的配置，只是在不同的路线上。您可以在此处了解更多信息：https://angular.io/guide/router#router-state

Angular ngx-editor 从其他 components.ts 文件中的 app.component.ts 外包配置

Angular ngx-editor outsource config from app.component.ts in other components.ts file

components

angular

ngx-editor