Angular: Создаем multiple checkbox компонент, который подойдет для повторного использования

[x893]

А также легко и быстро можно сделать дерево из ролей?

[zoonman]

А в чем заключается смысл дерева ролей? Сделать дерево из чекбосков несложно.

[Huan]

Думаю смысл в RBAC, который в большинстве случаев иерархии использует.

[kovalevsky]

Автор, Вы, конечно, простите, но Вы действительно считаете, что люди которые используют angular в своей работе не смогут написать компонент в 3 строчки, чтоб чекбоксы выбрать? Компонент, кстати, на переиспользование тянет в рамках проекта, в котором он был написан. Ещё и дефолтная change detection strategy даст просадку. Вы же и так знаете в какой момент меняется состояние, почему бы не использовать OnPush и самому не говорить ChangeDetector”у когда произошли изменения, которые нужно проверить?

[xxxTy3uKxxx]

Мне кажется, проблемы заметны уже в этом месте:

export class CheckboxItem {
 value: string;
 label: string;
 checked: boolean;

 constructor(value: any, label: any, checked?: boolean) {
  this.value = value;
  this.label = label;
  this.checked = checked ? checked : false;
 }
}

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

[xxxTy3uKxxx]

Я автора никак обидеть не хочу, просто статья тянет на "пишем гостевую книгу на PHP", которых на хабре было (и, наверное, еще будет вагон и маленькая тележка).

[guleaevvlad]

С вами согласен, но надеюсь в будущем будут менее тривиальные статьи)

[xxxTy3uKxxx]

Дерзайте, годный статей в ру-сегменте на тему Angular не очень много, обычно хочется почитать более сложный и интересный материал.

[kovalevsky]

Конечно, там полно проблем, помимо описанных. Начиная с того, что автору неплохо было бы для этих целей использовать новую возможность CLI — ng g library. Так же, неплохо было бы, изучить стайлгайд из официальной документации и начать использовать ng lint по своему коду перед публикацией статей и комитов в репозиторий. Ну и с rxjs ознакомиться, само собой.
А сейчас статья выглядит как «эй, я неделю как использую ангуляр, смотри чо могу». Не в обиду автору, но ему самому неплохо было бы ещё статей почитать

[guleaevvlad]

Это моя первая статья на хабре, хотелось дебютировать. Спасибо за комментарии, этого я и ждал. Есть тот же самый пример написанный с Reactive Forms, там есть и subscribe() из rxjs. А вот ng lint еще не пробовал, только ts lint.

[kovalevsky]

ng lint немножко поможет Вам соблюдать styleguide.

Про rxjs я писал не из-за subscribe и прочего, а просто непривычно видеть здесь имитацию задержки от сервера через setTimeout, если в боевых условиях там все равно будет Observable для асинхронности. В таком случае уместнее было бы использовать of(value) и через pipe добавить delayTime оператор.

[guleaevvlad]

Здесь конечно сразу checked = false должно быть. За это извиняюсь. За все комментарии спасибо, мне нравится конструктивная критика.

[xxxTy3uKxxx]

Можно сократить до такого:

export class CheckboxItem {
  constructor(
    public value: string,
    public label: string,
    public checked?: boolean
  ) {}
}

[xxxTy3uKxxx]

При условии, что вы не прокидываете так поля в сервисы. Там инжектор будет ругаться, что не может подкидывать классы без @Injectable/

[Druu]

Это же просто класс для данных, а не сервис, который обычно пишут как

interface {
 value: string;
 label:string;
 checked?: booolean;
}

та что инжектор ругаться точно не будет

[Druu]

А какие вы видите проблемы в этом месте?

[guleaevvlad]

На счет переиспользования совсем не соглашусь. Назовите причины?

[xxxTy3uKxxx]

Как уже сказал комментатор выше, при использовании стратегии Default, детектор будет реагировать на срабатывание детекторов соседних по стеку компонентов. Использование OnPush позволит вам запускать детектор вашего компонента только тогда, когда изменятся входящие данные.

[kovalevsky]

А Вы заверните в npm пакет, добавьте в другой проект и попробуйте собрать его с aot :)

[Druu]

1. Если инпуты не являются константами или обсерваблами, то факт их изменения должен быть обработан либо в onChanges, либо в сеттерах @Input() переменных. В данном конкретном случае при изменении selectedValues после стартовой инициализации (например, если состояние, которое кладется в чекбоксы, тоже подгружается) все отвалится.
2. можно написать ”onToggle(item)” и не страдать херней, пытаясь найти нужный элемент фильтром
   
3. вообще писать в onToggle() и т.п. обработчиках событий, код завязанный на факте апдейта биндинга — плохая идея, т.к. в данном случае мы имеем несколько независимых обработчиков, логика работы которых зависит от порядка их вызова (который может поменяться в следующей версии, например).
4. следует осторожнее менять из события внутреннего компонента стейт внешнег окомпонента, который потом прокидывается обратно внутрь. В данном случае, если поправить п.1, то это приведет к ошибке expression changed after checked.
5. есть интерфейс ControlValueAccessor и соответствующий провайдер, которые, будучи реализованы компонентом, делают этот компонент полноценным formControl с поддержкой биндингом ngModel либо реактивных форм

[guleaevvlad]

Спасибо!

[bestserg]

Как раз ожидал здесь увидеть использование ngModel с двусторонним байндингом. В таком виде компонент так себе подходит для повторного использования, будет много дублирующего кода методов 'onChange'

[guleaevvlad]

Будем редактировать в скором времени и исправлять ситуацию)