Question

我有一个插件组件，它包装了来自其他插件的组件：

// parent-addon/addon/components/parent-component.js
import Component from '@ember/component';
import layout from '../templates/components/parent-component';

export default Component.extend({
  layout,
  classNames: ['parent']
});

// child-addon/addon/components/child-component.js
import Parent from 'parent-addon/components/parent-component';
import layout from '../templates/components/child-component';

export default Parent.extend({
  layout,
});

// child-addon/addon/templates/components/child-component.hbs
{{#parent-component}}
  Hello
{{/parent-component}}

由于className是串联在一起的，因此子组件的包装div包含“父”类，例如

<div class="parent">
  <div class="parent">
    Hello
  </div>
</div>

是否可以从子组件的classNames中删除“父”类？我无权访问父加载项，因此无法更改其任何代码。

Answer 1

用this post弄清楚，必须这样做

// child-addon/addon/components/child-component.js
import Parent from 'parent-addon/components/parent-component';
import layout from '../templates/components/child-component';

export default Parent.extend({
  layout,
  init() {
    this._super(...arguments);
    this.set('classNames', []);
  }
});

灰烬从子组件中删除父类

1 个答案: