Question

我没有成功让屏幕限定符在Angular中工作。

我正在使用nativescript-dev-sass将SCSS个文件转换为CSS个文件。

在部署到设备之前编译组件。

已转换组件的提取TypeScript：

@Component({
    selector: 'plugin-user-login',
    templateUrl: 'user-login.component.ns.html',
    styleUrls: ['user-login.component.ns.css'],
    moduleId: module.id
})

我希望组件TypeScript文件根据设备在运行时的大小选择不同的CSS文件。

是否可以为styleUrls创建选择器？

是否有一个标记为SCSS文件的屏幕限定符的解决方案在运行时使用？

Answer 1

据我所知，NativeScript项目支持这一点，但NativeScript Angular项目不支持。

如果您愿意调整开发堆栈，我建议使用Team Maestro开发的角度原生种子。

https://github.com/TeamMaestro/angular-native-seed

已为种子添加了其他工具，以便您指定手机/平板电脑模板。

如果您需要比手机与平板电脑布局更具体的控制，我建议采用其他方法。您可以在主AppComponent中获取设备大小，然后将一个类附加到您的组件（即.size-468，以便您可以根据该大小设置样式。

下行：没有完成您的要求，为不同的屏幕尺寸设置单独的CSS文件。您可以抽出样式表并导入它们，或者使用SASS语法根据我之前的段落扩展类。

如果你对＆＃34;为什么＆＃34;这个问题存在。这是因为在运行时，NativeScript不知道运行应用程序的设备的大小。 Angular提前构建模板（AOT），因此目前还没有智能的方法来知道要加载的样式表或模板。

披露：我是Angular Native Seed的主要开发者之一。

Answer 2

我的同事帮助我解决了以下问题。

创建一个替换/编辑styleUrls String[]

的函数

export function switchStyleUrls(styleUrl: string): string {

    switch (Platform.deviceSize()) {
        case DeviceSizeE.dpi326:
            return styleUrl.replace(".css", ".minWH326.css");

        case DeviceSizeE.dpi401:
            return styleUrl.replace(".css", ".minWH401.css");

        case DeviceSizeE.default:
            return styleUrl;
    }
}

Platform.deviceSize()根据DeviceSizeE

返回platformModule.screen.mainScreen.widthPixels

将switchStyleUrls函数传入Component Decorators styleUrls String[]

@Component({
    selector: './plugin-user-login',
    templateUrl: './user-login.component.web.html',
    styleUrls: [switchStyleUrls('../plugin-user.scss')],
    moduleId: module.id
})

我的理解是styleUrls string[]在构建过程中得到了解决。

我还在测试这个解决方案。

NativeScript Angular屏幕限定符SCSS文件

2 个答案: