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 문제를 살펴 보자. 블록 양식을 사용하고 하위 구성 요소에 조치를 설정해야합니다.