-1

我正在尝试为每个后端微服务提供一个角度模块。因此，当它们在可用时使用彼此的组件和在容器中找不到组件时使用默认的“服务不可用”组件时，要保持每个模块独立和干净。

示例场景：假设有一个销售和会计模块。销售模块需要一个带有选择器的组件：'total-price'。销售模块和会计模块都被主模块使用，但销售不知道会计。当我在销售中调用“总价”标签时，我希望主模块在会计中找到它并在销售中显示它。

这里的“总价”标签选择器就像一个抽象（OO 接口），它的实现被放置在会计模块中，主模块应该有一个 IOC 来搜索并找到实现并将其注入到销售中，并返回一个如果视图不可用，则找不到视图（有点像空对象模式）。这也有助于处理授权并在不允许用户查看某些组件时返回正确的视图。

代码示例： 这是该场景的示例代码，但它无法编译，因为正如我的问题所述，我正在寻找一种编排方式，组合 UI 并将<total-price>组件注入销售而不直接引用会计模块。

4

1 回答 1

1

在 Angular 项目中，我们有模块和组件。假设我们有 2 个模块，它们是X和Y，每个模块都有 2 个组件，X1和X2以及Y1和Y2。

项目结构如下图所示。

  1. 应用模块
    • X（进口）
    • Y（进口）
  2. X
    • X1（申报）
    • X2（声明）
  3. 是
    • Y1（申报）
    • Y2（申报）

现在正如您在问题中提到的，我们想将 X1 组件用于 Y2 组件。一般来说，在 Angular 应用中，这种情况并不常见。我们很少会到达这些位置，但是如果我们得到一个呢？Angular已经提到每个组件都应该在自己的模块中使用，如果一个组件需要在多个组件中使用，那么它不属于单个模块，它属于整个应用程序或多个模块并且很常见。


解决方案 我们可以想象 X1 想用在 Y2 和 X2 组件中。我们必须创建另一个模块并将其命名为“ShareModule”并声明，将所有常用组件导出到其中，然后我们可以简单地将我们的 ShareModule 导入到我们想要使用 X1 的任何模块中。所以我们的项目结构应该如下所示。

  1. 应用模块
    • X（进口）
    • Y（进口）
  2. X
    • 共享模块（导入）
    • X2（声明）
  3. 是
    • 共享模块（导入）
    • Y1（申报）
    • Y2（申报）
  4. 共享模块
    • X1（声明和出口）

看看演示。

于 2018-08-08T13:28:08.593 回答