查看注射容器的角度 [英] View injection container for angular

问题描述

我正在尝试为每个后端微服务都提供一个角度模块.因此，当每个模块在使用彼此的组件时(如果可用)以及在容器中找不到该组件的默认服务不可用"组件时，要保持每个模块的独立性和清洁性.

I'm trying to have an angular module for each backend microservice. So to keep each module independent and clean while they use each other's components when available and a default "service-is-not-available" component, when the component is not found in the container.

示例方案:假设有一个销售和会计模块. 销售模块需要一个带有选择器的组件:总价". 主模块同时使用销售模块和会计模块，但是销售人员不了解会计. 当我在销售中调用总价"标签时，我希望主模块在会计中找到它并在销售中显示它.

Example Scenario: Let's say there are a sales and accounting module. The sales module needs a component with selector: 'total-price'. Sales module and Accounting module are both used by the main module, but the sales doesn't know about accounting. When I call the 'total-price' tag in sales I want the main module to find it in the accounting and display it in the sales.

此处，总价"标签选择器的工作方式类似于抽象(OO接口)，将其实现放置在会计模块中，并且主模块应具有IOC来搜索和查找实现，并将其注入到销售中，如果该视图不可用，则返回一个未找到的视图(类似于空对象模式).每当用户不被允许查看某些组件时，这也可能有助于处理授权并返回正确的视图.

Here the 'total-price' tag selector works like an abstraction (OO interface) which it's implementation is placed at accounting module, and the main module should have an IOC to search and find the implementation an inject it to the sales, and return a not found view if the view is unavailable (kind of like null object pattern). This may also help with handling authorization and returning a proper view whenever the user is not permitted to see some component.

代码示例: 这是一个示例该方案的代码，但是它不能编译，因为正如我的问题所指出的那样，我正在寻找一种编排方法，并在不直接引用会计模块的情况下，将UI组成并将<total-price>组件注入到销售中.

Code Sample: This is a sample code for the scenario but it doesn't compile, because as my question states I'm looking for a way of orchestrating, and composing the UI and injecting the <total-price> component to sales without referencing the accounting module directly.

推荐答案

在angular项目中，我们具有模块和组件.假设我们有两个模块，分别是 X 和 Y ，每个模块都有2个组件，分别是 X1 和 X2 和 Y1 和 Y2 .

In angular projects, we have modules and components. let's imagine that we have 2 modules which are X and Y, and each of them has 2 components,X1 and X2 and Y1 and Y2.

项目结构如下所示.

1. AppModule
   • X(import)
   • Y(导入)

1. AppModule
   • X ( import )
   • Y ( import )

• X1(声明)
• X2(声明)

• Y1(声明)
• Y2(声明)

现在，正如您在问题中提到的，我们希望将X1组件用作Y2组件. 通常，在角度应用中，这种情况并不常见.我们很少会担任这些职位，但是如果我们得到一个职位，该怎么办? Angular提到每个组件都应在其自己的模块中使用，如果一个组件需要在多个组件中使用，则它不属于单个模块，它属于整个应用程序或多个模块这很常见.

Now as you have mentioned in the question, we want to use X1 component into Y2 component. Generally, in the angular application, this situation is not a common one. we will reach to these positions rarely, but what if we get one? Angular has mentioned that each component should use in its own module and if a component needs to be used in several components, so it does not belong to a single module,it belongs to the whole application or multiple modules and it's common.

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

Solution We can imagine that X1 wants to be used in Y2 and X2 components. We have to create another module and named it 'ShareModule' and declare, export all common components into it, then we can simply import our ShareModule into any module which we want to use X1 into it. so our project structure should be like below.

1. AppModule
   • X(import)
   • Y(导入)

1. AppModule
   • X ( import )
   • Y ( import )

• ShareModule(导入)
• X2(声明)

• ShareModule(导入)
• Y1(声明)
• Y2(声明)

• X1(声明并导出)

看一下演示.

这篇关于查看注射容器的角度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！