当它们作为参数传递给插件时将值传递给 ember.js 组件（例如 ember-bootstrap-modals-manager）

Question

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

使用 ember-bootstrap-modals-manager 你可以显示一个 alert dialog with a 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);
 }

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

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

...您如何做到这一点并不明显，因为与 'normal' 组件使用不同，您不是在模板中调用有问题的组件，而只是在代码中指定名称。

所以我的问题是（如果你熟悉 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);
 }

并且可以通过 options 参数访问：

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

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

当它们作为参数传递给插件时将值传递给 ember.js 组件（例如 ember-bootstrap-modals-manager）

Passing values to ember.js components when they are passed as an argument to addin (eg ember-bootstrap-modals-manager)

modal-dialog

web-component

twitter-bootstrap

ember.js