NativeScript Angular屏幕限定符SCSS文件-Java 学习之路

我一直没有成功让屏幕限定符在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 文件的屏幕限定符的解决方案在运行时使用？

2 回答

0

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

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

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

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

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

缺点：没有完成你要求的，有一个单独的CSS文件用于不同的屏幕尺寸 . 您可以抽出样式表并导入它们，或者使用SASS语法根据我之前的段落扩展类 .

如果您对“为什么”这个问题存在感到好奇 . 这是因为在运行时，NativeScript不知道运行应用程序的设备的大小 . Angular提前构建模板（AOT），因此目前还没有智能的方法来知道要加载哪些样式表或模板 .

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

回复于 2024-05-03T12:37:17+08:00

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

创建一个替换/编辑 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() 基于 platformModule.screen.mainScreen.widthPixels 返回 DeviceSizeE

将 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[] .

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

回复于 2024-05-03T12:37:17+08:00

NativeScript Angular屏幕限定符SCSS文件

2 回答

相关问题