angular - 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 路由器将配置作为数据参数传递，这样您就可以使用相同的组件进行不同的配置，只是在不同的路由上。您可以在这里了解更多信息：https ://angular.io/guide/router#router-state