时间戳

首页 > 解决方案 > 动态路径导入 - Angular 组件

javascript - 动态路径导入 - Angular 组件

问题描述

有没有办法以这样的格式导入组件或任何相关的东西，其中有一个条件决定使用哪一个？

import { environment } from '../../environments/environment';

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

if (environment.envName == 'dev')
    import { ListInventoryComponent, ConfirmDeleteDialog } from 'this_local_path';
else
    import { ListInventoryComponent, ConfirmDeleteDialog } from 'this_npm_package_path';

我有本地组件和模块，我正在开发和创建 npm 包，但也希望能够在不更改代码中对它的每个引用的情况下测试它们。

标签： javascriptangular

解决方案

您不能以这种方式有条件地导入组件。你应该使用的是一个叫做Dynamic imports.

你可以在这里读更多关于它的内容：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

（此外，互联网上还有许多其他指南）。

一个例子是：

const getDynamicComponent = async (envName) => {
    let dynamicComponent;

    if (envName === 'dev') {
        dynamicComponent = await import('this_local_path');
    } else {
        dynamicComponent = await import('this_npm_package_path');
    }

    return dynamicComponent;
}

推荐阅读