【问题标题】:How to separate template and style for mobile and desktop in component Angular 2?如何在组件Angular 2中分离移动和桌面的模板和样式?
【发布时间】:2016-12-24 01:06:36
【问题描述】:

移动端和桌面端的模板有很大的不同,但在组件上有一个逻辑。我需要在单独的文件中为移动设备和桌面设备提供单独的模板和设计。我想根据屏幕包含模板和设计。

【问题讨论】:

    标签: javascript angular typescript responsive-design frontend


    【解决方案1】:

    您可以使用*ngIf

    template: `
    <div *ngIf="isMobile">
      mobile content
    </div>
    <div *ngIf="!isMobile">
      desktop content
    </div>
    

    Angular2 团队曾尝试使用 @View() 装饰器直接支持此功能,但在几个版本前将其删除,因为这似乎不是一个好策略。目前没有对您想要的内容的内置支持。

    【讨论】:

    • 感谢您的回答!如果我将使用这种方法,我将有很多很多代码。还有其他方法吗?
    • 也许我会在第一个组件中检查设备的分辨率,用户将重定向到另一个组件
    • 构建工具似乎允许这样做,但我不使用 TS,也不知道细节。我猜你需要构建 2 个不同的应用程序。
    • 我创建了 2 个不同的应用程序。我制作了像 npm 包这样的通用代码并连接到每个项目。所有工作都需要!
    猜你喜欢
    • 2017-04-28
    • 1970-01-01
    • 1970-01-01
    • 2016-01-03
    • 2020-02-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-03-19
    相关资源
    最近更新 更多