Как я могу вызвать угловую функцию при загрузке модального всплывающего окна

Question

Я использую Boostrap модальный, как это:

<!--Permission MODAL-->
<div class="modal fade" id="transactionPermissionModal" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-body">
        <p class="text-center">Create New</p>

        <div *ngIf="shouldPermissionsVisible">

          <div *ngFor="let permittedProfile of assignedPermissions" class="row">
            <div class="col-12">
              <p class="myText float-left">{{permittedProfile.profile.email}}({{permittedProfile.permission_type}})</p>
              <span style="float: right; cursor: pointer" (click)="RemovePermissionToUser(permittedProfile.profile.email)">&times;</span>
            </div>
          </div>

        </div>

        <div class="row">
          <div class="col-7" style="padding-right: 0px;">
            <input type="text" style="border-right: none" class="new-transaction-textfield" placeholder="Invite Someone" id="permission-email">
          </div>
          <div class="col-3" style="padding-left: 0px;padding-right: 0px;">
            <select id="permission-dropdown" style="background-color: transparent; height: 32px; border: 1px solid #d9d9d9;border-left: none; outline: none">
              <option value="edit">can edit</option>
              <option value="view">can view</option>
            </select>
          </div>
          <div class="col-2" style="padding-left: 0px;">
            <button type="button" class="btn invite-btn" (click)="GivePermissionToUser()">Invite</button>
          </div>
        </div>

        <br />

      </div>
      <!--<div class="modal-footer">-->
      <button type="button" id="permission-modal-close-btn" data-dismiss="modal" style="display: none">Close</button>
      <!--</div>-->
    </div>

  </div>
</div>

Теперь я хочу вызывать функцию всякий раз, когда на экране появляется всплывающее окно. Этот модальный полностью находится в другом компоненте, и он запускается из родительского компонента. Вот функция, которую я хочу вызвать:

/**
   * Get permission list from server
   *
   * @param nextLink: link to retrieve a specific page/result_set
   * @param childIndex: index number if user has clicked any child of a transaction otherwise it 'll be null
   */
  public GetPermissionsList(nextLink, childIndex: number = null) {
    if (nextLink === '') {
      this.assignedPermissions = [];
    }

    this.transactionsService.HandlePermissionRequestGeneracially(
      {}, this.url + nextLink, 'GET'
    ).subscribe((response) => {

      for (const entry of response.results) {
        this.assignedPermissions.push(entry);
      }

      this.shouldPermissionsVisible = true;

      this.assignedPermissions = this.assignedPermissions.slice(0);

      const next = response.next;
      if (next !== null) {
        this.GetPermissionsList(next.substring(next.indexOf('?'), next.length), childIndex);
        return;
      }
    }, (error) => {
      this.snackbarHandler.showSnackBar('Error while getting permission');
    });
  }

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

const myThis = this;
$('#transactionPermissionModal').on('shown.bs.modal', function (e) {
      this.GetPermissionsList('');
    });

Возможно, это из-за this экземпляра. Мне нужна помощь о том, как я могу вызвать эту функцию, когда модальное всплывающее окно (я бы предпочел не использовать jquery)

Answer 1

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

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

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

Существует несколькоСпособы изменения отображаемого содержимого, метод будет зависеть от вашей текущей настройки.Внутри компонента, связанного со страницей, вы можете использовать стандартные ловушки Angular по умолчанию, среди других опций.Вы можете найти список хуков и время их использования здесь: https://angular.io/guide/lifecycle-hooks