使用模块中的变量在装饰器中添加自定义CSS

Question

我有一个NativeScript Angular应用程序，我想为平板电脑使用单独的CSS。因此，我通过deviceType检查tns-core-modules/platform并在装饰器中添加平板电脑CSS，如果相关如下：

import { Component, OnInit } from '@angular/core';
import { DeviceType } from 'tns-core-modules/ui/enums';
import { device } from 'tns-core-modules/platform/platform';

@Component({
  moduleId: module.id,
  templateUrl: './login.component.html',
  styleUrls: [
    './login.component.css',
    device.deviceType === DeviceType.Tablet ? './login.component.tablet.css' : ''
  ]
})
export class LoginComponent implements OnInit {
}

当我运行常规tns run <platform>时这很好用，但是当我想创建一个包（并使用webpack）时，我得到一个错误：

只有初始化变量和常量才能在装饰器中引用，因为“device”中的模板编译器需要此变量的值

我认为我理解它原则上抱怨什么，但我希望device在我的组件被实例化时初始化，因为设备来自tns-core-modules模块。

谁能想到一种允许这种用途的方法？我已经看过这个blog，其中Eddy做了类似的事情但是在ngOnInit的后期，但这对我来说太迟了，因为不知何故平板电脑CSS不适用于模态。

谢谢！

Answer 1

令我惊讶的是，由于你的观点尚未构建，因此它无法在ngOnInit中工作。你可以使用constructor更快地推动它，但你可能会遇到同样的问题。

作为最后的手段，您也可以创建一个单独的组件，并使用ngIf选择模板中包含哪个组件。

但是，调查为什么你的Eddy示例的实现不起作用可能是值得的。