Angular 2 - 按类名添加/删除类

Question

在我的应用程序中，我将根据设备方向添加或删除一个类。因此，如果应用程序是纵向的，事情将保持原样。如果是风景，那么应该添加一个类。

我知道我可以使用 [class.ClassName] 轻松做到这一点 -

<div class="parentclass" [class.landscapeClass]="makeTrue">
 <span></span>
</div>

但问题是我将不得不在多个模板中重复此更改。

如何在使用另一个类 (parentclass) 的地方轻松添加和删除一个类（在我的示例中为 landscapeClass）？并在应用为纵向时将其移除。

我正在使用cordova screen orientation plugin 获取应用程序的方向。

我正在使用 Angular2 RC4，我正在寻找无需使用 Jquery 的解决方案。

编辑：我试图找到这样的解决方案的原因是，当键盘出现在 Android 上时，使用媒体查询会弄乱我的 UI。我知道使用宽高比的工作，但它不是 100% 可靠的解决方案。

Answer 1

如果该类仅用于调整元素的样式，则可以使用 css 媒体查询来检查纵向方向，而不是添加一个类。

@media only screen and (orientation: portrait) {}
@media only screen and (orientation: landscape) {}

编辑：您还可以将类放在更全局的元素上，并从方向玻璃开始选择器。

CSS：

.orientationPortrait .parentClass { /* styling */}

萨斯：

.parentClass {
  .orientationPortrait & { /* styling */}
}