如何从其他组件调用 Ember 组件？答案

【问题标题】：How to call Ember component from other component?如何从其他组件调用 Ember 组件？
【发布时间】：2017-01-19 18:08:50
【问题描述】：

我有这些组件，我希望它们可以被其他组件调用。

模板/组件/post-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>

components/post-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,
});

模板/组件/form-alert.hbs

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

components/form-alert.js

import Ember from 'ember';

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

export default FormAlert;

我想在 ajax 请求之后从 post-edit.js 文件中调用 form-alert 组件。
我想在 ajax 请求之后调用其他组件并渲染并将其放入 form-result-placeholder 类中。
如何从其他组件调用 Ember 组件并渲染到目标元素？

我的 Ember 版本：2.8.0

【问题讨论】：

Send actions to parent component?的可能重复
@lependu 它不是重复的。我的问题是从组件 js 文件中调用组件。这个问题是从模板标签调用父组件。
你不需要“调用”一个组件。只需在父组件上设置一个 displayChild 属性，并根据该值显示子组件。您可以使用参考答案中的操作切换属性。
@lependu ajax 响应可能有不同的结果文本消息，这些消息将在 form-alert 组件中动态显示。要从模板切换属性是不可能的，如果是这样，我该如何设置来自 ajax 响应的消息？
您可以将调用的结果设置为属性，并传递给孩子。仅显示该文本。

标签： javascript ember.js ember-components

【解决方案1】：

看看this的问题。您需要使用块形式，并在子组件上设置动作。

【讨论】：

不，它与那个问题不同，请阅读我上面的评论。