Question

我有两个组件：SpecialButtonComponent和SpecialButtonDerivativeComponent。

SpecialButton组件会自动使用/app/templates/components/special-button.hbs上的模板。

我希望SpecialButtonDerivativeComponent使用相同的模板，但到目前为止我没有运气试图使用这种技术：

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

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

我还尝试使用layoutName代替templateName，但仍然没有运气。有什么想法吗？

Answer 1

组件没有templateName。

我会尝试将layout设置为null，然后指定layoutName。

Answer 2

在Ember 2.2中layoutName成为私有API。我建议使用Gabriel Grant解决方案，并设置父组件的layout属性。

// 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({
});

如何使用Ember CLI在两个组件之间共享模板？

2 个答案: