Angular2: Изменение класса таба через ElementRef

Возвращаясь к прошлому примеру — в изменении не хватает активации пункта меню (вернее она есть — но мы не сможем с ней работать если нужно .active дописать к элементу li

Повторение пройденного

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

Мое удивление и разочарование было безграничным ибо классы отрисовывались с задержкой в один клик, т.е. значение менялось в поле tab, в шаблоне обновлялось {{tab}}, но связанное действие на класс опаздывало до следующей отрисовки. Добавление тестовых контроллеров в роутер показало что проблема хоть и мелкая — но гаденькая (пользователь явно будет опечален)

Изменение класса элемента в DOM и Angular2

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

А теперь навяжем изменение табика на него, и вуаля — мы манипулируем классом элемента списка без задержек ура ура ура

Оставить комментарий

XHTML: Вы можете использовать такие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">