How can I share a template between two components using Ember CLI?

问题

I have two components: SpecialButtonComponent and SpecialButtonDerivativeComponent.

The SpecialButton component automatically uses the template found at /app/templates/components/special-button.hbs.

I would like for SpecialButtonDerivativeComponent to use the same template, but so far I'm having no luck trying to go with this technique:

// app/components/special-button-derivative.js
import SpecialButtonComponent from './special-button';

export default SpecialButtonComponent.extend({
  templateName: 'components/special-button'
});

I've also tried using layoutName instead of templateName, but still no luck. Any ideas?

回答1:

Components do not have a templateName.

I would try to set layout to null and then specify a layoutName.

回答2:

In Ember 2.2 layoutName became a private API. I would recommend Gabriel Grant solution and set the layout property of the parent component.

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

export default Component.extend({
  layout
});


// child-component
import ParentComponent from './parent-component';

export default ParentComponent.extend({
});

来源：https://stackoverflow.com/questions/27449968/how-can-i-share-a-template-between-two-components-using-ember-cli