Ember：如何将 HTML 类绑定到 Service 属性，使该类是动态的

Question

我有一个家长route。在这个路由里面有一个组件被渲染。

route 有一个 template.hbs 文件，其中包含一个 HTML div 元素。我需要能够从我的孩子component 中更改此 div 元素的类。

为此，我计划使用一项服务。想法是将服务注入route 和子component，然后将 div 的类绑定到服务上的属性。然后，当我将服务注入子组件时，我可以更改属性并查看父路由反映的任何更改。

问题是，绑定似乎不起作用！

父路由：

模板： <div class={{model.containerClass}}>

Route.js：

dashboardContainerManager: service('dashboard-container-manager'),

afterModel(model) {
   model.set('containerClass', this.get('dashboardContainerManager').dashboardContainerClass);

服务：

export default Service.extend({
  dashboardContainerClass: null,

  init() {
    debugger; //placed to ensure one instance being made
    this._super(...arguments);
    this.set('dashboardContainerClass', 'container dashboard-container'); //need to set it here to prevent glimmer error
  },

  changeContainerClass(newClass) {
    debugger;
    this.set('dashboardContainerClass', newClass);
  }
});

子组件：

  dashboardContainerManager: service('dashboard-container-manager'),
  init() {
    this._super(...arguments);
    this.get('dashboardContainerManager').changeContainerClass('test');
  },

上述代码的结果是我的 div 的类最初设置为“容器仪表板容器”，因为这是我的服务上的 dashboardContainerClass 属性初始化的值。但是，当我的组件内的值更改为“test”时，我的 div 的类没有更新，这表明它没有正确绑定到 dashboardContainerClass 的值。我也尝试在不同的地方使用计算属性，但无法正常工作。

我在这里做错了什么？！

Answer 1

这里有一个 reads 计算属性宏可以帮助您：

https://emberjs.com/api/ember/3.7/functions/@ember%2Fobject%2Fcomputed/reads

在您的组件中，您只需执行以下操作：

import { reads } from '@ember/object/computed';

  // ...
  dashboardContainerManager: service('dashboard-container-manager'),

  containerClass: reads('dashboardContainerManager.dashboardContainerClass'),

更新/完整示例：

服务：

export default Service.extend({
  dashboardContainerClass: 'container dashboard-container',

  changeContainerClass(newClass) {
    this.set('dashboardContainerClass', newClass);
  }
});

路线：

export default Route.extend({
  // removed afterModel and service injection
});

控制器：

export default Controller.extend({
  containerManager: service('dashboard-container-manager'),

  containerClass: reads('containerManager.dashboardContainerClass'),
});

模板：

<div class='some-other-class {{containerClass}}'>
  other stuff
</div>