Ionic/Angular 动态组件导入

Question

我有一个离子应用程序，我想运行在浏览器和移动设备上。我正在尝试添加一些条件以仅在我们或移动设备导入本机组件的情况下执行此操作的最佳方法。

import { Component } from "@angular/core";
import { IonicPage, NavController, NavParams } from "ionic-angular";
import { AppVersion } from "@ionic-native/app-version";
@IonicPage()
@Component({ selector: "page-more", templateUrl: "more.html" })
export class MorePage {
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private appVersion: AppVersion;
  ) {
    this.appVersion.getVersionNumber().then(ver => {
      this.appVerStr = ver;
    });

  }

在上面的示例中，我只想在移动设备上导入 AppVersion，因为这对浏览器不可用，我收到 cordova_not_found 错误

Answer 1

Cordova 仅在设备上执行，不在浏览器中执行。在浏览器中查看构建时避免错误的方法是将 Cordova 命令包装在平台 if 语句中。例如：

import { Platform } from 'ionic-angular';
 import { AppVersion } from "@ionic-native/app-version";

     constructor(private platform: Platform, private appVersion: AppVersion) {
        this.platform.ready().then(function () {
          if (platform.is('cordova')) {
                    this.appVersion.getVersionNumber().then(ver => {
              this.appVerStr = ver;
            });
          }
        });
      }

Answer 2

不，不幸的是你不能有条件地导入库..你可以做一些事情，比如导入两个库，在你的构造函数中注入并创建一个函数并基于平台（this.platform.is('browser') 或在你的case this.platform.is('android')) 你可以写代码了。

不用担心内存占用..angular treeshaker 会自动为您删除未使用的代码:)

更新：

if (platform.is('cordova')) {
        this.appVersion.getVersionNumber().then(ver => {
          this.appVerStr = ver;
        });
      } else {
        // code related to browser thing
      }

Ionic/Angular 动态组件导入

Ionic/Angular Dynamic component import

ionic3

angular