Angular服务注入后为什么在组件里拿不到数据？

爱学习的曦月提问于 2026-03-30 19:13:13 阅读 4

框架

我在Angular里写了个UserService，用HttpClient去请求用户信息，但在组件里调用时总是返回undefined，明明控制台能看到网络请求成功了啊。

我试过把subscribe里的逻辑直接写在service里，也试过用async/await，但组件里还是拿不到值。是不是我哪里搞错了？

<template>
  <div>{{ userInfo?.name }}</div>
</template>

<script setup>
import { onMounted } from 'vue'
import { inject } from 'vue'

const userService = inject('userService')
let userInfo

onMounted(() => {
  userService.getUser().then(res => {
    userInfo = res
  })
})
</script>

我来解答赞 1 收藏

反馈

1 条解答

___风珍 Lv1

从你的代码来看，问题可能出在响应式数据绑定上。Angular组件里的数据需要使用Vue的响应式系统来管理。

我的做法是把 userInfo 定义成一个 ref 或者 reactive 变量。这样当数据更新时，视图才能自动刷新。你试试这样改：

import { onMounted, ref } from 'vue'

import { inject } from 'vue'



const userService = inject('userService')

const userInfo = ref(null)



onMounted(() => {

  userService.getUser().then(res => {

    userInfo.value = res

  })

})

记得在模板里用 userInfo.value 访问数据的时候加上 ?. 操作符，确保数据加载前不会报错。

另外一个小建议：虽然你用了 inject 获取服务，但最好还是通过依赖注入的方式在组件中声明 UserService。这样更符合 Angular 的规范，调试起来也方便些。

说真的，这种数据绑定的问题我以前也踩过不少坑，特别是刚从 AngularJS 过来的时候。希望这能帮你解决问题！

2026-03-30 19:17