EmberJS:动态插入组件

EmberJS: Insert component dynamically

本文关键字：组件 插入 动态 EmberJS      更新时间：2023-09-26

>有以下组件：

App.ParentComponent = Ember.Component.extend({
   child: '',
   yieldTemplateName: 'empty_by_default',
   setup: function(){
     //append here child compoment
   }.on('didInsertElement')
});
App.ChildComponent = Ember.Component.extend({
   templateName: 'some_location',
   actions:{
     //whatever
   }
});

我想知道是否可以在任何渲染状态下并根据参数将子组件添加到父组件中？

所以我打电话，例如：

{{parent child="child"}}

它最终呈现：

<div !-- parent -- >
  <div !-- child -- > </div>
</div>

App.ParentComponent = Ember.Component.extend({
    child: null,
    hasChild: Em.computed.notEmpty('child')
});
// parent template
{{#if hasChild}}
    {{component child}}
{{/if}}
// another template
{{parent child="child"}} {{!-- displays ChildComponent --}}

注意：组件帮助程序将在 Ember 1.11 中提供。如果您使用的是早期版本，则可以使用 ember-dynamic-component 插件。

相关文章：