首页 文章

共享Angular 2应用程序,web / mobile-web / Ionic 2

提问于
浏览
1

我似乎找不到在所有平台上使用相同的角度2代码的答案,例如Angular 2正在推动他们的网站 . 如果我有一个现有的网站(裸骨只有node.js服务器和Angular 2),我怎么能在不需要保留单独的离子应用的情况下加入离子2?反之亦然(离子应用,我需要成为一个网络应用程序)?

有各种各样的答案,如复制离子应用程序的www文件夹,但我不认为这是一个最佳实践答案,因为你不能重复使用100%的代码 . 它似乎违背了跨平台的论点,用很多相同的代码维护两个完全独立的代码库 .

1 回答

  • 2

    它似乎违背了跨平台的论点,以维护两个完全独立的代码库和许多相同的代码 .

    您可以使用完全相同的代码,并使用platform information决定如何显示布局:

    Platform Name   Description
    android on a device running Android.
    cordova on a device running Cordova.
    core    on a desktop device.
    ios on a device running iOS.
    ipad    on an iPad device.
    iphone  on an iPhone device.
    mobile  on a mobile device.
    mobileweb   in a browser on a mobile device.
    phablet on a phablet device.
    tablet  on a tablet device.
    windows on a device running Windows.
    

    使用底层的 platform 信息,您可以通过简单地执行以下操作来显示或隐藏事物(如果是 core 平台(Web应用程序)或不显示(移动应用程序):

    this.isWebapp = this.platform.is('core');
    

    然后使用 *ngIf 或您在应用程序中需要的任何内容 .

    关于款式:

    Ionic2使用模式来自定义组件的外观 . 每个平台都有一个默认模式,但可以覆盖它 .

    同样,您可以根据设备的显示方式控制应用程序的样式 . 就像你可以阅读here一样,在你的 body 元素中会添加一个类( core 如果它是一个web应用程序,或 ios / android / windows ,如果它是一个移动应用程序) . 因此,您可以为每个平台创建自定义样式,它们将自动应用 .

    因此,我认为您可以(并且应该)使用相同的代码来创建移动和Web应用程序,甚至可以使该应用程序在其他设备(如平板电脑或平板手机)中正常工作 .

相关问题