Использование переменной из модуля для добавления пользовательских CSS в декоратор - PullRequest
Новая
       15

Использование переменной из модуля для добавления пользовательских CSS в декоратор

0 голосов
/ 01 мая 2019

У меня есть приложение 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>, однако, когда я хочу создать пакет (и используется веб-пакет), я получаю сообщение об ошибке:

В декораторах можно ссылаться только на инициализированные переменные и константы, поскольку значение этой переменной требуется компилятору шаблона в 'device'

Я думаю, что я понимаю, на что он в принципе жаловался, но я ожидал бы, что device будет инициализирован к моменту создания экземпляра моего компонента, поскольку устройство происходит из модуля tns-core-modules.

Может кто-нибудь придумать, как разрешить такое использование? Я видел этот блог , где Эдди делает нечто подобное, но на более позднем этапе в ngOnInit, но это слишком поздно для меня, потому что планшетный CSS не применяется к модальным модам.

Спасибо!

1 Ответ

1 голос
/ 01 мая 2019

Меня немного удивляет, что он не работает в ngOnInit, так как ваше представление еще не было построено. Вы можете нажать его еще раньше, используя constructor, но вы можете столкнуться с той же проблемой.

В крайнем случае, вы можете просто создать отдельный компонент и выбрать, какой из них будет включен в ваш шаблон с ngIf.

Возможно, стоит выяснить, почему ваша реализация примера Эдди не работает.

...