Как запустить функцию после того, как компонент стал видимым в модальном диалоге Bootstrap в Angular 8? - PullRequest
Новая
       41

Как запустить функцию после того, как компонент стал видимым в модальном диалоге Bootstrap в Angular 8?

2 голосов
/ 14 января 2020

В моем проекте Angular есть компонент select-box, который получает данные из моих моделей данных. Опции, поступающие в основном из службы, выбранное значение поступает из текущей открытой модели данных.

Я хочу добавить кнопку добавления рядом с тегом выбора. Если пользователь нажимает на эту кнопку, он получает модальное окно с формой для модели, которая отображается в списке выбора. Если пользователь добавит сюда новый экземпляр модели, данные будут сохранены в хранилище, и выбор будет обновлен этим новым экземпляром.

Я использую сложные формы со многими полями выбора - идет со многими кнопками плюс, открывается многие создают компоненты.

Я хочу избегать рендеринга этих компонентов, пока пользователь не нажмет указанную кнопку плюса.

Вот код TypeScript моего родительского компонента: 

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  // this coming from a data service
  langs = [
    {id: 1, name: 'english'},
    {id: 2, name: 'deutsch'},
    {id: 3, name: 'latin'},
  ];

  // coming from a data service
  model = {
    id: 100,
    name: 'John Doe',
    lang_id: 3,
  }
}

Вот пример того, как я сейчас использую свой компонент select: 

<app-select-box [items]="langs" [selectedValue]="model.lang_id">
  <app-lang-create-edit></app-lang-create-edit>
</app-select-box>

Вот код HTML моего компонента select-box: 

<div class="input-group">
  <select class="form-control">
      <ng-container *ngFor="let item of items">
        <option [value]="item[value]">{{ item.names[0][text] }}</option>
      </ng-container>
  </select>
  <div class="input-group-append" *ngIf="!buttonHide">
    <button class="btn btn-light" tabindex="-1" (click)="showModal(modal)"> + </button>
  </div>
</div>

<!-- Modal -->
<div class="modal" tabindex="-1" role="dialog" *ngIf="isModalOpen">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
      <h5 class="modal-title">Add new element</h5>
      <button type="button" class="close" (click)="hideModal()">
          <span aria-hidden="true">&times;</span>
      </button>
      </div>
      <div class="modal-body">
          <ng-content></ng-content>
      </div>
    </div>
  </div>
</div>

Я думаю, что проблема приближается от использования тега ng-content, потому что он рендерит входящий код одновременно с рендерингом <div class="modal" ...>.

Вот рабочий пример с более подробными кодами.

Можно ли как-то избежать рендеринга компонента app-lang-create-edit до тех пор, пока модал не будет виден?

Я хочу повторять рендеринг каждый раз, когда пользователь закрывает и снова открывает модальное диалоговое окно.

Есть Есть ли решение?

...