在 Angular 中为工具栏或文本编辑器创建单个配置文件

Question

我在 Angular 项目的多个组件中使用了以下 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

一个好主意是将 textEditor 包装在一个新组件中，并在其中定义您的 toolbarOptions。

如果您需要使用您的新组件，但在编辑器中包含或排除某些功能，您可以让您的新组件采用 @Input() toolbarOptions 覆盖特定 use-cases 的默认配置.

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

选项本身可以在服务中定义（一般组件应该尽可能小）。您甚至可以创建一个函数，该函数采用一个枚举来定义您需要的配置（如果您需要多个配置）。

但是仅仅为了 return 数组的唯一目的而提供服务有点矫枉过正。

另一种选择是将 const 简单地导出到一个单独的文件中，例如 export const toolbarOptions = ....，然后您可以将其导入到您需要它的组件中。您还可以创建一个带有静态函数的 class 到 return 选项。

Answer 2

在文件中使用您的工具栏配置信息创建摘要 class，例如：

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

在 Angular 中为工具栏或文本编辑器创建单个配置文件

Create a single config file for Toolbar or TextEditor in Angular

typescript

primeng

angular