首页 > 其他分享 >Angular 14 inject 函数使用过程中的一些注意事项

Angular 14 inject 函数使用过程中的一些注意事项

时间:2022-11-06 21:36:36浏览次数:71  
标签:依赖 函数 14 inject 使用 Angular 构造函数

inject 函数只能用于构造器阶段,这意味着其只能在构造器函数作用域(constructor function scope)和字段初始化器(field initializers)中使用。

下列代码会遇到运行时错误(runtime error):

因为使用到了 inject 函数的 fetchEntity 方法,在构造函数作用域之外的上下文里被调用,不符合 inject 函数的使用前提。

当在构造函数阶段之外调用 refreshEntity 方法时,上面的代码将引发运行时错误,例如在单击按钮时,因为 fetchEntity 使用了 inject()。 当用于初始化 entity$ 属性时,它不会抛出此错误,因为它处于构造函数阶段。

解决方案也不难,使用 JavaScript 的 closure 闭包概念:

在上面的例子中,因为我们使用了一个闭包,所以我们能够将注入的 HttpClient 和 ActivatedRoute 存储在闭包范围内,并且仍然使用返回函数中的值。因此,我们可以在构造函数阶段之外利用 inject() 函数。

正如我们在上面的示例中已经看到的那样,使用 inject 函数能够保持组件符合单一职责的设计准则(single responsibility)和无依赖注入。

依赖注入或 DI 是 Angular 中的基本概念之一。 DI 被连接到 Angular 框架中,并允许具有 Angular 装饰器的类(例如组件、指令、管道和可注入)配置它们需要的依赖项。

DI 系统中存在两个主要角色:依赖消费者和依赖提供者。

我们不再直接在组件构造函数中依赖 HttpClient 或 ActivatedRoute。 相反,我们创建了一个可注入的函数来处理业务逻辑,这种思路类似于我们如何将逻辑提取到一个 Facade 服务中。并且 Angular 的最佳事件认为,Component 需要完成的业务逻辑最好都封装到一个专门的 Facade 服务中。
使用 inject() 函数,我们不再需要组件中的任何依赖项。

标签:依赖,函数,14,inject,使用,Angular,构造函数
From: https://www.cnblogs.com/sap-jerry/p/16864144.html

相关文章