動態路徑導入 - Angular 組件

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