问题标签 [angular-dependency-injection]

我以 Angular 的“延迟加载功能模块”为例： live demo

CustomersModule是一个延迟加载模块，我在客户模块中创建了一个测试服务。

在 CustomersModule 中，将其添加到提供程序：

CustomersModule 也有一个CustomersComponent，通过这种方式我可以在其中使用 TestService。

但是当我从CustomersModule的提供者数组中删除TestService并在TestService中使用providedIn时：

我收到了这个错误：

我知道这里有循环依赖，对于急切加载的模块，它可以工作，并且会启用 tree-shaking。这是否意味着在延迟加载模块中只能在 NgModule 中使用提供者数组？

有这方面的指导方针/最佳做法吗？

@Input在属性中注入“服务”依赖项是一种好习惯吗？此上下文中的服务不是在根级别管理的单例实例，而是接口的不同实现的多个实例。

考虑以下示例：在 Angular 库中，ShapeComponent 依赖于 ShapeService（接口）。

零件

解决依赖关系的一种简单方法是设置输入属性，如下面的代码所示。

上述方法是否适用于解决组件中的依赖关系？

如果使用输入属性方法，那么服务/依赖项必须以相同的方式传播到子组件。这种方法的缺点是父组件必须接受所有依赖项作为输入属性。

是否有任何推荐的方法来在库级别注入和作用域依赖项？

我正在尝试使用属性指令将元素的模板引用从父组件传递到使用依赖注入的嵌套组件，但父组件中获取目标元素的指令实例与被注入到嵌套组件中——正在创建指令的第二个实例，它不访问目标元素，这就是被注入的那个。

这是基本结构：

我试图传递对#myTargetdown的引用以<grandchild>使用 DirectiveappendTarget和 DI 而不是@Inputs （工作正常），因此<child>不需要了解它并充当传递。

我已经包含AppendTargetDirective在providers父组件的数组中：

并将其注入<grandchild>组件中：

但是，有两个实例AppendTargetDirective被创建，一个获取对的引用#myTarget，一个不获取引用，并且GrandchildComponent正在获取后者。

这是一个 StackBlitz演示这个问题。如果您打开控制台，您会看到 Directive 构造函数被调用了两次（我在其构造函数中为每个实例生成一个唯一 ID），并且获取目标元素的实例不是被注入的实例. 我认为将它包含在providers父组件的数组中会创建一个它的单个实例，该实例将在父组件及其后代之间共享，但显然我的想法不正确。

任何帮助将不胜感激。

我希望将window.location搜索参数中的值传递给依赖提供者工厂的主体，理想情况下以惯用的 Angular 方式。

用例：编写我的第一个 Angular 应用程序我的应用程序在一个端口上运行，后端服务器在另一个端口上。我想附加&backend=localhost:12345到 URL 以使应用程序与该主机对话。这是只读的，手写到 URL 栏。我不想导航到这样的 URL。

考虑的方法：

1. 直接使用window.location.href。使代码依赖于浏览器，可能会破坏测试装置或任何其他想要在浏览器之外执行代码的东西。
2. 使用PlatformLocation.href. 文档说“应用程序开发人员不应直接使用此类。”</li>
3. 使用Location.path(). 似乎有效，但似乎也没有提供任何访问完整 URL 的方法。独立路径包含查询参数，但作为构造函数的参数似乎无效URL，所以我最终得到了类似new URL('http://no-such-host/' + location.path()).searchParams.get('backend'). 算不上优雅。
4. 以某种方式使用ActivatedRoute.queryParams。将 anActivatedRoute注入我的工厂显然会给我一个默认实例（字符串化为Route(url:'', path:'')），因此查询参数似乎不存在。并且该queryParams方法返回一个Observable，而从我在网上阅读的内容来看，为提供者工厂使用异步代码流充其量是棘手的。

有没有更好的方法让工厂根据查询参数做出决策？

我正在尝试创建一种“最简单”的机制，用于在 Angular Web 项目和 Ionic/Angular 移动应用程序之间共享代码。我也一直在探索 monorepo 方法，但我想看看是否可以从移动项目中简单地导入存在于 Web 项目中的模块。

这似乎在多个 Angular 项目之间完美运行，但是当我将服务（它本身使用另一个服务）导入 Ionic 项目时，我得到运行时错误：'inject() must be called from an injection context'。

我想知道这是否是一个可以解决的问题，或者它是不应该工作的东西？

我可以使用 Angular 10.0.5 和 Ionic 6.11.0（它本身安装 Angular 9.1.6）通过一对最小的新安装项目来证明这一点。

我尝试了一些通过搜索找到的建议：

• 在 angular.json 中将 preserveSymlinks 设置为 true
• 在 tsconfig.json 中设置 "paths": { "@angular/ ": [ "./node_modules/@angular/ " ] }

我还尝试了一些在导入应用程序中提供服务的不同方式：

• 提供在：根
• app.module.ts 提供者列表中的类
• [MyOtherService, { provide: MyService, useClass: MyService }] 形式的显式提供程序

编辑：为了演示这个问题，我在 Angular 项目中创建了 2 个非常基本的虚拟服务，其中一个引用了另一个：

虚拟服务.ts

Dummy2Service

然后在 Ionic 项目中，导致错误所需要做的就是在应用程序组件中引用一个虚拟服务（来自另一个项目）：

我有一个角度项目，其中包含带有核心和共享模块的延迟加载模块。每个模块都有一些json配置文件，我需要在依赖注入的组件中使用它们的内容。

哪个演练对此更好：

1-在加载每个模块时使用文件阅读器服务读取json文件，并在DI中添加映射对象。
（这会发生吗？在模块加载时动态读取 json 文件并将对象作为依赖项注入？）

2-在加载组件时读取json文件并使用其数据。

3-其他情况？

我有一个抽象类和它的实现

然后介绍Angular DI：

我可以像下面这样使用它：

现在我想要 IPrint 的多重实现

然后介绍Angular DI：

当我想使用 IPrint 时，angular 不知道必须使用哪个实现：

我需要向以这种形式出现的后端 url 发出请求：

其中id1和id2是动态数字。我曾想过在构造函数中使用一个接受 2 个参数的服务，就像这样

我真的不知道如何将参数注入构造函数。我还需要在解析器中使用此服务，如何在解析器中将参数传递给它？在这种情况下创建注入令牌听起来毫无用处，因为令牌值每次都应该改变。我已经没有想法了

我想知道是否有办法在ElementRef没有构造函数注入的情况下获取实例Angular？

为什么我需要它：

我有一个抽象的 BaseComponent 类，它被许多其他 Angular 组件类继承。我想避免ElementRef通过调用注入所有子类super(elementRef)，而是将其直接注入 BaseComponent 类 -

我已经构建了一个演示，它创建了 2 个自定义角度元素（结帐 app.module）。像魅力一样工作，但有一个问题，如果我在父元素（称为 BarComponent）中提供服务，它的子 CE（称为 TestComponent）不会收到它

在其 html 中，它呈现子 CE：TEST-CE: <test-ce></test-ce>

如果我尝试以这种方式注入我的TestService，我会得到“NullInjectorError：没有 TestService 的提供者！”

但是，如果我在 app.module 中提供它，它就会再次起作用。所以我的问题是，有没有办法解决这个问题，或者这只是 CE 的方式（希望不是）？