NativeScript Angular ngClass 不工作

Question

我有一个 DockLayout 和两个 css classes。我改变了 state.sideDrawer.isOpen 但元素的 class 没有改变。当我 console.log 它 class 我看到第一个 class 它保持静止。我尝试在 .ts 文件中设置它的 class 并且它起作用了。但我需要 ngClass 才能工作。有什么问题吗？

我正在使用最新的 Angular CLI(7.2.1) 和 Nativescript(5.1.0)。

这里是游乐场 link : 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;
}

Answer 1

您的滑动事件在 Angular 上下文之外执行，您必须在 HTML 模板中使用事件绑定或使用 Renderer2 to add add event listener to the ElementRef 以便 Angular 执行更改检测.

Here is the updated Playground.

Answer 2

我在 {N}-Angular 应用程序中遇到了类似的问题。对我来说，问题是因为我在 .css 文件中将 ngClass css class 定义为高于默认值 class，因此它首先被导入并被覆盖默认一个。切换 classes 的顺序为我解决了这个问题

NativeScript Angular ngClass 不工作

NativeScript Angular ngClass is not working

ng-class

nativescript

angular