Question

有没有办法以这种格式导入组件或任何其他相关内容，条件是一个条件决定了要使用哪个组件？

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软件包的，但也希望能够对其进行测试而无需更改代码中对其的所有引用。

Answer 1

您不能有条件地以这种方式导入组件。相反，您应该使用称为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;
}

动态路径导入-角度组件

1 个答案: