guleaevvlad Jul 13 2018 at 20:00

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

5 min

26K

JavaScript*HTML*Angular*TypeScript*

From sandbox

Comments 23

x893 Jul 13 2018 at 21:03

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

zoonman Jul 13 2018 at 21:30

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

Huan Jul 14 2018 at 15:01

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

kovalevsky Jul 13 2018 at 22:20

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

xxxTy3uKxxx Jul 14 2018 at 10:57

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

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 Jul 14 2018 at 11:02

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

guleaevvlad Jul 14 2018 at 15:19

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

xxxTy3uKxxx Jul 14 2018 at 16:13

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

kovalevsky Jul 14 2018 at 11:07

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

guleaevvlad Jul 14 2018 at 15:18

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

kovalevsky Jul 14 2018 at 16:30

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

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

-1

guleaevvlad Jul 14 2018 at 15:09

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

xxxTy3uKxxx Jul 14 2018 at 16:16

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

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

xxxTy3uKxxx Jul 14 2018 at 16:17

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

Druu Jul 15 2018 at 22:04

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

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

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

Druu Jul 15 2018 at 22:02

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

guleaevvlad Jul 14 2018 at 15:20

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

xxxTy3uKxxx Jul 14 2018 at 16:21

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

kovalevsky Jul 14 2018 at 16:26

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

Druu Jul 15 2018 at 21:47

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

guleaevvlad Jul 16 2018 at 16:11

Спасибо!

bestserg Jul 17 2018 at 12:07

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

guleaevvlad Jul 17 2018 at 12:07

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

Show the best of all time