Передача значений в компоненты ember. js, когда они передаются в качестве аргумента в addin (например, ember- bootstrap -modals-manager)

Question

У меня есть вопрос по поводу аддона ember- bootstrap -modals-manager , но возможно, что описываемая мной проблема может возникнуть с другими аддонами Ember.

Использование ember- bootstrap -modals-manager вы можете отобразить диалоговое окно с предупреждением с настраиваемым телом . Вот снимок экрана примера.

Для этого вы создаете компонент 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 вызывается не напрямую через шаблон, а через динамический помощник c {{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 args:

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

Однако, это не очевидно при просмотре документов , Вы даже можете внести свой вклад в документацию, когда найдете время:)