Как избежать дублирования ViewChildren в Angular?

Question

У меня более 10 компонентов, в которых дублируется следующий код:

export class Component implements OnInit {
    @ViewChildren(CheckboxComponent) checkboxes: QueryList<CheckboxComponent>;

     public onSelectedAll(value: boolean): void {
        this.checkboxes
            .toArray()
            .slice(1)
            .forEach((element) => {
                element.checked = value;
            });
    }

    public onSelectedOne(value): void {
        console.log(value);
    }
}

Как вы хотите вытащить этот код наружу, какой он должен быть сервисом или просто настраиваемым экспортируемым классом, функцией?

Как правильно сделать это в Angular и при необходимости легко ввести в компонент?

Answer 1

Лучше всего: " Создать специальную директиву с этой функцией и использовать ее со своим флажком "

Answer 2

Поскольку у нас недостаточно подробностей о семантике этих компонентов и о том, можно ли сделать лучшую реализацию (например, вместо запроса ваших ViewChildren у вас может быть модель вашего списка флажков). Я собираюсь ответить только с точки зрения высокого уровня.

В этом случае вы можете использовать OOP и использовать наследование, вы можете извлечь свои общие logi c в класс (вы можете сделайте это абстрактным, если необходимо).

Общий класс

export abstract class CommonComponent {
   /* Put common Methods and Fields here
      including @ViewChildren and any other annotated fields */
}

Реализация компонента

export class MyComponent extends CommonComponent implements OnInit {
   /* Put here Methods and Fields specific to this Component
      In this component, you can make use of all the fields and methods
      that are public or protected from the parent class
      (public ones can be used in template as well */
}

Answer 3

Вам определенно необходимо предоставить подробную информацию о вашем (компоненте флажков)

@ViewChildren(CheckboxComponent) checkboxes: QueryList<CheckboxComponent>;

Вы также должны рассмотреть свою настройку, однако, если вы хотите остаться с этой настройкой, не используйте @ViewChildren, чтобы получить данные из вашего дочернего компонента вместо этого используют EventEmitters для получения данных в вашем родительском компоненте.

Каждый раз, когда состояние вашего флажка изменяется, отправляйте событие родительскому компоненту с данными.

Проверьте angular документы для EventEmitters:

https://angular.io/api/core/EventEmitter