twitter-bootstrap - 当将值作为参数传递给 addin 时将值传递给 ember.js 组件(例如 ember-bootstrap-modals-manager)

Question

我对插件有疑问 ember-bootstrap-modals-manager但其他 Ember 插件也可能会出现我所描述的问题。

使用 ember-bootstrap-modals-manager 您可以显示 alert dialog与 custom body 。这是示例的屏幕转储。

为此，您需要创建一个 Ember 组件，其模板包含您的自定义正文标记，例如...

<p class="alert alert-info">
  Custom Alert Body Component
</p>

...然后，您可以通过在调用警报对话框时指定组件的名称来指定警报正文应使用该标记，如下所示(假设创建的组件称为 custom-alert-body ) ...

showCustomAlertModal() {
    const options = {
      bodyComponent: 'custom-alert-body',
    };
    set(this, 'options', options);
    get(this, 'modalsManager')
      .alert(options);
 }

...这很好，但如果您想将值注入(inject)组件模板，例如像这样...

<p class="alert alert-info">
  Custom Alert Body Component. The alert msg is : {{alertmsg}}
</p>

...如何做到这一点并不明显，因为与“正常”组件使用不同，您不是在模板中调用相关组件，而只是在代码中指定名称。

所以我的问题是(如果您熟悉 ember-bootstrap-modals-manager)您如何拥有一个在运行时接受值的自定义主体，或者(如果您不熟悉它)您见过在不同的上下文中像这样使用的组件，如果是的话，它们如何接受运行时值？

Answer 1

是的，你说得对。由于组件 bodyComponent 不是由您直接通过模板调用，而是通过动态 {{component}} 帮助程序调用，因此包 ember-bootstrap-modals -manager 应该公开一种将值传递到组件的方法。

查看了包的源代码并发现 options object has been sent到动态调用的组件。因此，您可以通过选项对象发送 alertMsg:

showCustomAlertModal() {
    const options = {
      bodyComponent: 'custom-alert-body',
      alertMsg: 'Post created successfully' // <- your alert message
    };
    set(this, 'options', options);
    get(this, 'modalsManager')
      .alert(options);
 }

并且可以通过选项参数访问:

<p class="alert alert-info">
  Custom Alert Body Component. The alert msg is : {{options.alertmsg}}
</p>

但是，浏览文档时，这一点并不明显。当您有时间时，您甚至可以为文档做出贡献:)