Ember路由注入服务后访问服务属性显示undefined问题

我之前也踩过这个坑！服务本身能访问到，但所有属性都是undefined，大概率是初始化时机或者属性赋值的问题，咱们一步步来排查：

1. 确保服务的异步初始化方法已被调用且等待完成 #

你的服务里有load()方法，里面用到了store.query这类异步操作——如果在路由的model/beforeModel钩子里只是拿到服务，但没调用load()，或者调用了但没等待它完成，那属性自然还没被赋值，访问就是undefined。

正确的做法（异步/await写法）： #

// 你的路由文件
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default Route.extend({
  // 注入你的服务，这里假设服务文件名叫user-service.js
  userService: service('user-service'),

  async beforeModel() {
    // 等待服务的load方法执行完成
    await this.get('userService').load();
    // 现在再访问服务的属性就有值了
    console.log(this.get('userService.currentUser'));
  }
});

或者用RSVP的then写法（适配旧版Ember）： #

beforeModel() {
  return this.get('userService').load().then(() => {
    // 异步操作完成后再访问属性
    console.log(this.get('userService.currentUser'));
  });
}

2. 检查服务内是否正确赋值属性 #

从你给出的代码片段看，load()方法里只写了return this.get('store').q...，但没有把查询结果赋值给服务的属性！比如你需要把查询到的数据用set方法存到服务里：

// 你的服务文件
import Service from '@ember/service';
import { inject as service } from '@ember/service';
import RSVP from 'rsvp';

export default Service.extend({
  session: service('session'),
  store: service(),

  load() {
    if (this.get('session.isAuthenticated')) {
      // 假设你要查询当前用户并存储到currentUser属性
      return this.get('store').query('user', { current: true }).then((users) => {
        // 用set方法设置服务属性，确保Ember的响应式系统能追踪到
        this.set('currentUser', users.firstObject);
        return users;
      });
    }
    // 未登录时返回空的resolved promise，避免阻塞路由
    return RSVP.resolve();
  }
});

3. 用Ember的get方法访问属性（针对旧版Ember） #

因为你用的是Service.extend这种旧的类写法，Ember的响应式属性依赖get/set方法追踪。如果直接用原生点语法（比如this.userService.currentUser），可能会绕过Ember的属性系统，导致拿不到值——一定要用this.get('userService.currentUser')来访问。

4. 确认服务注入的名称匹配 #

虽然你说服务本身不是undefined，但还是要确认路由里的注入名称和服务文件名一致：比如服务文件是app/services/user.js，那路由里应该写user: service()或者user: service('user')，名称不匹配也可能导致属性异常。

按照这几步排查下来，应该就能解决属性undefined的问题了！

内容的提问来源于stack exchange，提问作者El Poisen