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

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

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

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

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

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

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

但是仅以返回数组为唯一目的而提供服务是有点过头了。

另一个选择就是将const导出到单独的文件中，例如export const toolbarOptions = ....，然后可以将其导入所需的组件中。您还可以使用静态函数创建一个类以返回该选项。

在Angular中为工具栏或TextEditor创建一个配置文件

2 个答案: