Question

我创建了一个ember服务并初始化了它的值，现在我在控制器中更新了该值。我要在完整的应用程序中使用此更新的变量吗？我应该怎么办。任何帮助将不胜感激。谢谢

Answer 1

只是一个虚拟的例子

服务

// header.js

import Service from '@ember/service';

export default Service.extend({
  currentRoute: null
});

路线

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';
import { set } from '@ember/object';

export default Route.extend({
  header: service(),

  beforeModel() {
    set(this, 'header.currentRoute', 'login');
  }
});

任何控制器

import Controller from '@ember/controller';
import { computed, get } from '@ember/object';
import { inject as service } from '@ember/service';

export default Controller.extend({
  header: service(),

  currentRoute: computed('header.currentRoute', function() {
    return get(this, 'header.currentRoute');
  })
});

希望您能理解这个主意

Answer 2

请参阅余烬指南https://guides.emberjs.com/release/components/triggering-changes-with-actions/#toc_invoking-actions-directly-on-component-collaborators

中的这篇文章

您做的是正确的，一旦在服务中设置了该变量的更新值，该值将保持不变，直到您指示代码更改该变量的值为止。要回答您的问题，Can i access ember service variables in my whole application?是的，您可以执行以下操作将变量访问到您的应用程序中。

假设这是您的变量和服务名称 //services/current-session.js

import Service from '@ember/service';


export default Service.extend({
  foo: 'foo bar baz',
});

如果您想在自己的controller中访问它，请执行以下操作

import Controller from '@ember/controller';
import { computed } from '@ember/object';
import { inject as injectService } from '@ember/service';

export default Controller.extend({
  currentSession: injectService(),

  bar: computed('currentSession.foo', function() {
    return this.currentSession.foo;
  }),
});

如果要在组件中访问它

import Component from '@ember/component';
import { computed } from '@ember/object';
import { inject as injectService } from '@ember/service';

export default Component.extend({
  currentSession: injectService(),

  bar: computed('currentSession.foo', function() {
    return this.currentSession.foo;
  }),
});

以上方法基于ember-cli 3.4，您可以在这里进行余烬游戏。 https://ember-twiddle.com/b92a7d4fa03a1699a5b8a79aca5d2782?openFiles=controllers.application.js%2C

如果您想通过控制器更改服务中变量的值，可以执行此操作

import Controller from '@ember/controller';
import { set } from '@ember/object';
import { inject as injectService } from '@ember/service';

export default Controller.extend({
  currentSession: injectService(),

  actions: {
    change() {
      this.currentSession.set('foo', 'foo bar baz please');
    }
  }
});

Answer 3

正在工作twiddle。

步骤：

1）创建服务：

app/services/service-name.js

import Service from '@ember/service';

export default Service.extend({
  name: "hello",
  changeName(name) {
    this.set('name', name);
  }
});

2）创建一个初始化程序，因此您无需在每个路由/控制器/组件中注入服务。

app/initializers/inject-service-name.js

export function initialize(application) {
  application.inject('controller', 'serviceName', 'service:service-name');
  // if needed
  // application.inject('route', 'serviceName', 'service:service-name');
  // application.inject('component', 'serviceName', 'service:service-name');
}

export default {
  initialize
};

一旦初始化好初始化器，就会restart您的余烬服务器。

3）用法：

app/controller/application.js

import Controller from '@ember/controller';

export default Controller.extend({
  init() {
    this._super(...arguments);
    // print initial value
    console.log(this.get('serviceName').name); // hello
    // change value of name property in service
    this.get('serviceName').changeName("hai");
    // print changed value
    console.log(this.get('serviceName').name); // hai
  }
});

我可以在整个应用程序中访问余烬服务变量吗？

3 个答案: