Как я могу сделать параметры панели инструментов для «ngx-editor» динамически отформатированными в форме переменной или константы в Angular?

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

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

Я хочу сохранить приведенные выше значения панели инструментов как константы или переменные. Ожидаемое поведение -

Случай 1: Сделайте это константами и используйте.

текст-formatting.const.ts

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

abc.comComponent.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.comComponent.ts

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

Я попробовал оба способа, но, кажется, ничего не работает. Может ли кто-нибудь помочь мне найти решение этой проблемы? Спасибо.

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
0
338
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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

Большое спасибо @Нарен! Первое решение сработало для меня прекрасно :)

Nandita Singh 29.04.2024 15:08

Другие вопросы по теме