他のコンポーネントからEmberコンポーネントを呼び出す方法は？

Question

私はこれらのコンポーネントを持っていて、それらを他のコンポーネントから呼び出すことができます。

テンプレート/構成要素/ポストedit.hbs

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12"> 
      <form id="{{if isEditing 'form-edit' 'form-add'}}" method="post" enctype="multipart/form-data"> 
       <div class="form-result-placeholder"></div><!--.form-result-placeholder--> 
       <div class="form-group"> 
        <label for="name">Name</label> 
        {{input id="name" class="form-control" name="name" placeholder="Name" value=name required="required"}} 
       </div> 
       <div class="form-group"> 
        <label for="file">File</label> 
        {{input type="hidden" name="MAX_FILE_SIZE" value="1048576"}} 
        {{input id="file" class="form-control" type="file" name="file" aria-describedby="file_help"}} 
        <small id="file_help">JPG only, less than 1 MB.</small> 
       </div> 
       <button type="submit" {{action 'addNew'}} class="btn btn-primary">Submit</button> 
       <a href="./" class="btn btn-secondary">Go back</a> 
      </form> 
     </div> 
    </div> 
</div> 

コンポーネント/ポストedit.js

import Ember from 'ember'; 
import config from 'php-api-ember-test/config/environment'; 

export default Ember.Component.extend({ 
    actions: { 
     addNew() { 
      console.log('hit on submit button from add page'); 
      this.get('addNew'); 
     }, 
     editSave() { 
      console.log('hit on submit button from edit page'); 
      this.get('editSave'); 
     } 
    }, 
    addNew: Ember.computed(function() { 
     console.log('adding new data'); 
     var formData = new FormData($('#form-add')[0]); 
     this.get('ajax').request(config.APP.phpApiUrl+'/add', { 
      method: 'POST', 
     }) 
     .catch(function(error) { 
      console.log(error); 
      var response = error.errors[0].detail; 
      console.log(response); 
      // I want to call other component and render from here and put it in form-result-placeholder class. 
      //console.log(Ember.Component.FormAlert);// undefined 
      //$('.form-result-placeholder').html('{{form-alert}}');// not working 
     }); 
    }), 
    editSave: Ember.computed(function() { 
     console.log('saving edit data'); 
    }), 
    ajax: Ember.inject.service(), 
    isEditing: false, 
}); 

テンプレート/構成要素/フォームalert.hbs

FORM ALERT!!! (this alert message will be change by ajax response. it is not static.) 

コンポーネント/フォームalert.js

import Ember from 'ember'; 

const FormAlert = Ember.Component.extend({ 
}); 

export default FormAlert; 

私はアヤックス要求後ポストedit.jsファイル内からform-alertコンポーネントを呼び出したいです。
他のコンポーネントを呼び出して、Ajaxリクエストの後にレンダリングして、form-result-placeholderクラスに入れたいと思います。
Emberコンポーネントを他のコンポーネントから呼び出してターゲット要素にレンダリングするにはどうすればいいですか？

マイエンバーバージョン：2.8.0

Answer 1

はthis質問を見てみましょう。ブロックフォームを使用し、子コンポーネントに対してアクションを設定する必要があります。