2

我正在开发一个使用 Angular 7 的项目，我为我构建的应用程序的各个模块提供了各种角度库，然后在（私有）npm 上发布以供应用程序使用。所以所有的 Angular 库都是通过它们的 npm 包导入到应用程序中的。

我面临的问题是我现在有 2 个相互导入的模块，因为它们需要显示来自另一个模块的组件。我不能将上述组件移到其他地方，因为它们依赖于自己模块中的服务和其他组件。

为了让它更清楚一点，我会给你一个我的情况的例子。

我已经有一个SharedModule带有一些在其他模块中使用的独立组件，然后我也有一个用于每个 API 服务的模块。所以我有一个UsersModule'AdministrationModule' 等。我的问题是PlantModuleand FleetModule。

  • 像发电厂一样的工厂
  • 舰队作为一组工厂和/或其他舰队，但也有自己的属性

PlantModule有一个用于植物列表的组件（如发电厂而不是有机植物）和一个用于植物详细信息的组件。在详细信息组件中还有其他外部组件，例如显示分配给它的所有用户以及车队。

FleetsModule还有一个用于车队列表的组件和一个用于详细信息的组件。在此详细组件中，还有外部组件，例如分配的用户、子车队列表和属于车队一部分的工厂列表。

我想做的是让可重用的组件在其他模块中使用，这样我就不需要在任何地方复制粘贴所有的 API 服务、组件等。

关于我做错了什么或如何解决它的任何想法？

更新

为了解决它，我更改了需要这些组件的“页面”的结构。因此，我没有在库中的其他组件中导入可重用组件，而是在主应用程序中创建一个包装器视图并导入我需要的所有内容。

4

1 回答 1

0

所以你有三个模块，DeskModule，UsersModule和OfficeSuppliesModule。

DeskModule导入UsersModule和因为它有两个在OfficeSuppliesModule这个模块的一个组件中显示它们的组件。

问题是OfficeSuppliesModule你有一个组件DeskModule来显示它属于哪个桌子。

我不太明白为什么你有一个组件只是为了展示这一点？您可以利用可以在CoreModule. 通过该服务，您可以公开一种方法来告知OfficeSuppliesModule这些办公用品属于哪个办公桌上的组件模板。由于不会有需要重复使用的组件，因此您不会遇到此问题。

您可以做的另一件事是将您在您DeskModule和您中使用的组件移动到SharedModule OfficeSuppliesModule，然后将SharedModuleimportsDeskModuleOfficeSuppliesModule

更新

从 Angular 6 开始，您可以添加providedIn: 'root'到@Injectable装饰器中，而不是将服务名称添加到providers模块的数组中。这样，服务就会注册到root注入器，并且可以在整个应用程序中使用。

因此，您可以通过添加这些服务providedIn: 'root'的@Injectable装饰器来更改多个模块中所需的所有服务：

@Injectable({
  providedIn: 'root'
})

然后按照上面这个更新的建议，将PlantModule和 中使用的组件移动FleetsModule到SharedModule.

于 2018-10-23T14:16:50.777 回答