如何在 Angular 中将“ngx-editor”的工具栏选项动态格式化为变量或常量形式？

Question

import { Editor, Toolbar } from 'ngx-editor';

toolbar: Toolbar = [['bold', 'italic', 'bullet_list', 'ordered_list']];

我想将上面的工具栏值存储为常量或变量。预期行为 -

情况1：将其设为常量并使用它。

文本格式化.const.ts

export const TEXT_FORMATTING_TYPE = {
    BOLD: 'bold',
    ITALIC: 'italic',
    BULLET_LIST: 'bullet_list',
    ORDERED_LIST: 'ordered_list'
}

abc.component.ts

import {TEXT_FORMATTING_TYPE} from '../../constants';

toolbar: Toolbar = [[ TEXT_FORMATTING_TYPE.BOLD, TEXT_FORMATTING_TYPE.ITALIC, TEXT_FORMATTING_TYPE.BULLET_LIST, TEXT_FORMATTING_TYPE.ORDERED_LIST]];

案例2：将其设为变量并使用它。

abc.component.ts

bold: ToolbarItem;
italic: ToolbarItem;
bulletList: ToolbarItem;
orderedList: ToolbarItem;
toolbar: Toolbar = [[ this.bold, this.italic, this.bulletList, this.orderedList ]];

我尝试了两种方法，但是似乎没有任何效果。谁能帮我找到这个问题的解决方案？谢谢你。

Answer 1

只需将值转换为

ToolbarItem[]

，这将解决您的问题！

...
toolbar: Toolbar = [
    <ToolbarItem[]>[
      TEXT_FORMATTING_TYPE.BOLD,
      TEXT_FORMATTING_TYPE.ITALIC,
      TEXT_FORMATTING_TYPE.BULLET_LIST,
      TEXT_FORMATTING_TYPE.ORDERED_LIST,
    ],
    ...

另一种方法是将类型设置为

TBItems

，这也可以！

import { TBItems } from 'ngx-editor';

export const TEXT_FORMATTING_TYPE: { [key: string]: TBItems } = {
  BOLD: 'bold',
  ITALIC: 'italic',
  BULLET_LIST: 'bullet_list',
  ORDERED_LIST: 'ordered_list',
};

Stackblitz 演示