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

举报
汪子熙 发表于 2023/01/29 10:03:53 2023/01/29
【摘要】 inject 函数只能用于构造器阶段,这意味着其只能在构造器函数作用域(constructor function scope)和字段初始化器(field initializers)中使用。下列代码会遇到运行时错误(runtime error):因为使用到了 inject 函数的 fetchEntity 方法,在构造函数作用域之外的上下文里被调用,不符合 inject 函数的使用前提。当在构造...

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() 函数,我们不再需要组件中的任何依赖项。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。