离子/角度动态组件导入

Posted 2021-05-03

我有一个离子应用程序，我想在浏览器和移动设备上运行。我试图添加一些条件只导入本机组件，如果我们是移动设备whatx最好的方法来做到这一点。

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错误

答案

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;
            });
          }
        });
      }

另一答案

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

不要担心内存使用..角treeshaker将自动删除未使用的代码:)

更新：

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