Question

我有一个DockLayout和两个CSS类。我更改state.sideDrawer.isOpen，但元素的类未更改。当我console.log上课时，我看到它上的第一个课保持静止。我尝试在.ts文件中设置其类，并且它起作用了。但是我需要ngClass才能工作。怎么了？

我正在使用最新的Angular CLI（7.2.1）和Nativescript（5.1.0）。

这是Playground链接：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向ElementRef添加添加事件侦听器，以便Angular执行更改检测。

Here is the updated Playground.

Answer 2

我在{N} -Angular应用中遇到了类似的问题。对我来说，问题是因为我在.css文件中的默认类之上定义了ngClass css类，因此它首先被导入并被默认的覆盖。切换课程顺序可以为我解决问题

NativeScript Angular ngClass无法正常工作

2 个答案: