将值作为插件的参数传递给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);
 }

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

<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);
 }

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

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

但是，浏览文档时并不明显。您甚至可以在发现时间时为文档做出贡献：）