Question

我有一个父母route。在此路线内，有一个渲染的组件。

route有一个包含HTML div元素的template.hbs文件。我需要能够从我的孩子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的类最初设置为“ containerdashboard-container”，因为这是服务上的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>

灰烬：如何将HTML类绑定到Service属性，以便该类是动态的

1 个答案:

更新/完整示例：