当前位置: 首页 > Web前端 > HTML

Angular14inject函数使用过程中的一些注意事项

时间:2023-04-02 22:24:56 HTML

inject函数只能在构造函数阶段使用,也就是说只能在构造函数作用域(constructorfunctionscope)和字段初始化器(fieldinitializers)中使用使用。下面的代码会遇到运行时错误(runtimeerror):因为使用了inject函数的fetchEntity方法,是在构造函数作用域之外的上下文中调用的,不满足inject函数的前提。当在构造函数阶段之外调用refreshEntity方法时,例如在单击按钮时,上面的代码将抛出运行时错误,因为fetchEntity使用inject()。当用于初始化entity$属性时,它不会抛出此错误,因为它处于构造函数阶段。解决方案并不太难,使用JavaScript的闭包概念:在上面的示例中,因为我们使用了闭包,所以我们能够将注入的HttpClient和ActivatedRoute存储在闭包范围内,并且仍然使用返回函数值。因此,我们可以在构造函数阶段之外使用inject()函数。正如我们在上面的例子中看到的,使用注入功能可以使组件遵守单一职责设计原则(单一职责),没有依赖注入。依赖注入或DI是Angular中的基本概念之一。DI连接到Angular框架中,并允许带有Angular装饰器的类(例如组件、指令、管道和可注入对象)配置它们需要的依赖项。DI系统中有两个主要参与者:依赖消费者和依赖提供者。我们不再直接在组件构造函数中依赖HttpClient或ActivatedRoute。相反,我们创建一个可注入函数来处理业务逻辑,类似于我们将逻辑提取到外观服务中的方式。而Angular最好的地方就是最好把Component需要完成的业务逻辑封装成一个专门的Facade服务。使用inject()函数,我们不再需要组件中的任何依赖项。