Возвращаясь к прошлому примеру — в изменении не хватает активации пункта меню (вернее она есть — но мы не сможем с ней работать если нужно .active дописать к элементу li
Повторение пройденного
Наивно полагая, что мы можем использовать прошлый код и ngClass директиву, мы добавляем так же как и тайтл в прошлом примере таб в данные между компонентами.
Мое удивление и разочарование было безграничным ибо классы отрисовывались с задержкой в один клик, т.е. значение менялось в поле tab, в шаблоне обновлялось {{tab}}, но связанное действие на класс опаздывало до следующей отрисовки. Добавление тестовых контроллеров в роутер показало что проблема хоть и мелкая — но гаденькая (пользователь явно будет опечален)
Изменение класса элемента в DOM и Angular2
Пришлось прибегнуть к тому, от чего очень отговаривает официальная документация — прямому манипулированию html тегами на странице. Для этого инициализируем элемент в компоненте (рутовый элемент, к которому компонент привязан)
А теперь навяжем изменение табика на него, и вуаля — мы манипулируем классом элемента списка без задержек ура ура ура