Создайте один файл конфигурации для панели инструментов или TextEditor в Angular - PullRequest
Новая
       1

Создайте один файл конфигурации для панели инструментов или TextEditor в Angular

0 голосов
/ 21 мая 2019

У меня есть следующий конфиг для PrimeNG TextEditor, используемого в нескольких компонентах в проекте Angular. Я хочу определить этот конфиг в файле и извлечь его из всех необходимых компонентов вместо того, чтобы определять их несколько раз. Каков наилучший способ выполнить это? Создание нового компонента? Я знаю, что это возможно путем создания компонентов, но я не уверен, что это лучшие практики. Любая помощь, пожалуйста? 

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
];

Ответы [ 2 ]

2 голосов
/ 21 мая 2019

Создайте абстрактный класс в файле с информацией о конфигурации панели инструментов, например: 

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
0 голосов
/ 21 мая 2019

Хорошей идеей было бы обернуть textEditor в новый компонент и определить там свои опции инструментов.

Если вам когда-нибудь понадобится использовать новый компонент, но включить или исключить некоторые функции из редактора, выможет заставить ваш новый компонент принимать @Input() toolbarOptions, который переопределяет конфигурацию по умолчанию для конкретных случаев использования.

Помните, что если ваш компонент должен использоваться в реактивных формах, он должен реализовать ControlValueAccessor interface.

Сами параметры могут быть определены в сервисе (в общем случае компоненты должны быть как можно меньше).Вы могли бы даже создать функцию, которая принимает перечисление, определяющее, какая конфигурация вам нужна (если вам когда-либо понадобится более одной).

Но иметь службу с единственной целью - просто возвратить массив - это немного излишне.

Другой вариант - просто экспортировать const в отдельный файл, такой как export const toolbarOptions = ...., и затем вы можете импортировать его в компоненты, где вам это нужно.Вы также можете создать класс со статической функцией для возврата опции.

...