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的示例的实现不起作用。

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

1 个答案: