NativeScript Angular ngClass 不起作用答案

【问题标题】：NativeScript Angular ngClass is not workingNativeScript Angular ngClass 不起作用
【发布时间】：2019-01-15 21:36:00
【问题描述】：

我有一个 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;
}

【问题讨论】：

你能分享一个 Playground 样本吗？另外让我们知道您现在正在测试哪个平台？
我添加了请求的链接和信息。

标签： angular nativescript ng-class

【解决方案1】：

您的滑动事件在 Angular 上下文之外执行，您必须在 HTML 模板中使用事件绑定或使用 Renderer2 将添加事件侦听器添加到 ElementRef 以便 Angular 执行更改检测。

Here is the updated Playground.

【讨论】：

它有效，但我根本不明白。您将 trigger('sideDrawerAnimate',) 放在那里，但没有指定要设置动画的元素。它怎么知道要制作什么动画？更重要的是，在 Angular 上下文之外执行是什么意思？
我认为您对不同的方法感到困惑，因为您在元素上提到了ngClass，每当分配新类时，动画就会在元素上发生。另一种选择是通过 TS & Animation apis 来实现。您不必同时使用两者。
我知道这些触发因素对解决方案没有贡献。您只在元素上放置滑动事件。你为什么把动画的东西放在组件里呢？
我没有放，这是你的代码。你可以删除那些，实际上并不是必需的。

【解决方案2】：

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

【讨论】：