为工具栏或Angular创建一个单个配置文件

Question

i具有以下在角度项目中多个组件中使用的Primeng Texteditor的配置。我想在文件中定义此配置，并从所有必要的组件中检索它，而不是在组件上多次定义。执行此操作的最佳方法是什么？创建新组件？我知道创建一个组件是可能的，但我不确定这是否是最佳实践。有帮助吗？

toolbarOptions: any = [
    [{ 'header': [3, false] }],
    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
    ['blockquote', 'code-block'],
    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
    [{ 'indent': '-1' }, { 'indent': '+1' }],
    [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
    [{ 'align': [] }],
    ['clean']                                         // remove formatting button
];

Answer 1

使用您的工具栏配置信息在文件中创建一个抽象类，例如：

export abstract class ToolbarConfig {
    static toolbarOptions: any = [
        [{ 'header': [3, false] }],
        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
        ['blockquote', 'code-block'],
        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
        [{ 'indent': '-1' }, { 'indent': '+1' }],
        [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
        [{ 'align': [] }],
        ['clean']                                         // remove formatting button
    ];
};

确保制作toolbarOptions static。

然后将您的配置导入到任何文件中：

import { ToolbarConfig } from '../configs/app.config';

并在您想要的任何地方使用toolbarOptions：

ToolbarConfig.toolbarOptions

Answer 2

一个好主意是将文本编辑器包裹在新组件中，并在其中定义您的工具键。

如果您需要使用新组件，但是包括或排除编辑器中的某些功能，则可以使您的新组件使用@Input() toolbarOptions覆盖特定用例的默认配置。

请记住，如果要以反应性形式使用您的组件，则必须实现ControlValueAccessor接口。

选项本身可以在服务中定义(通常应该尽可能小(。您甚至可以制作一个函数，该函数可以定义所需的配置(如果您需要多个配置(。

，但为仅返回数组的唯一目的提供服务有点过高。

另一个选项只是仅在export const toolbarOptions = ....之类的单独文件中导出const，然后您可以在需要的组件中导入它。您也可以创建具有静态功能的类以返回选项。