NativeScript Angular ngClass не работает - PullRequest
Новая
       8

NativeScript Angular ngClass не работает

0 голосов
/ 16 января 2019

У меня есть DockLayout и два класса CSS. Я изменяю state.sideDrawer.isOpen, но класс элемента не меняется. Когда я console.log его класс, я вижу, что первый класс, который он получает, остается на месте. Я попытался установить его класс в файле .ts, и это сработало. Но мне нужен ngClass для работы. Что может быть не так?

Я использую последний Angular CLI (7.2.1) и Nativescript (5.1.0).

Вот ссылка на игровую площадку: https://play.nativescript.org/?template=play-ng&id=oCeLRd

   <DockLayout #sideDrawer stretchLastChild="false" [ngClass]="{'sideDrawerOpen': state.sideDrawer.isOpen == true, 'sideDrawerClosed': state.sideDrawer.isOpen == false}" style="background-color: #3c3f47;width: 600px;padding: 0 0 5px 15px;"></DockLayout>

CSS: 

@keyframes sideDrawerOpen {
   from  { transform: translate(-500, 0);}
   to { transform: translate(0, 0);}
}

@keyframes sideDrawerClosed {
   from  { transform: translate(0, 0);}
   to { transform: translate(-100, 0);}
}

.sideDrawerOpen{
   animation-name: sideDrawerOpen;
   animation-duration: 2s;
   animation-fill-mode: forwards;
}

.sideDrawerClosed{
   animation-name: sideDrawerClosed;
   animation-duration: 2s;
   animation-fill-mode: forwards;
}

Ответы [ 2 ]

0 голосов
/ 17 июля 2019

У меня была похожая проблема с приложением {N} -Angular. Для меня проблема была в том, что я определил класс ngClass css над классом по умолчанию в файле .css, поэтому он импортировался первым и перезаписывался по умолчанию. Смена порядка занятий решила проблему для меня

0 голосов
/ 16 января 2019

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

Вот обновленная детская площадка.

...