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

beq87vna  于 2022-11-05  发布在  Bootstrap
关注(0)|答案(1)|浏览(123)

我有一个关于ember-bootstrap-modals-manager插件的问题,但它的可能性,我所描述的问题可能会发生与其他ember插件。
使用ember-bootstrap-modals-manager,你可以用custom body来显示alert dialog

为此,您需要创建一个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)你怎么能有一个在运行时接受值的自定义体,或者(如果你不熟悉它)你是否见过在不同的上下文中这样使用的组件,如果见过,它们是如何接受运行时值的?

0tdrvxhp

0tdrvxhp1#

是的,你是对的。由于组件bodyComponent不是由你直接通过模板调用的,而是通过动态{{component}}帮助器调用的,所以包ember-bootstrap-modals-manager应该公开一种将值传递到组件中的方法。
检查了包的源代码,发现选项对象已经被发送到动态调用的组件。因此,您可以通过选项对象发送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>

不过,在浏览文档时,这一点并不明显。你甚至可以在有空的时候为文档做贡献:)

相关问题