查看 Angular 的注入容器

Question

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

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

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

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

Answer 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
   • ShareModule（导入）
   • X2（声明）
3. 是
   • ShareModule（导入）
   • Y1（声明）
   • Y2（声明）
4. 共享模块
   • X1（声明和导出）

Have a look at demo.