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调用它，则它不会更新UI上的数据。而是在下次出现模式弹出窗口时显示它。

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

可能是因为this实例。我需要有关模式弹出窗口时如何调用此函数的帮助（我希望不使用任何jquery）

Answer 1

您可以从与调用模态相同的位置调用函数。如果在用户尝试操作时调用了模式，则该操作应触发模式和功能。

如果页面加载后立即发生模态，则在与该页面关联的ngOnInit函数中应触发该函数。

调用该函数后，对于需要更改的任何信息，您仍将需要调用该函数来更改模态的内容，以更改已呈现的内容。

有多种更改渲染内容的方法，该方法取决于您当前的设置。在与页面关联的组件内部，您可以使用Angular的默认生命周期挂钩以及其他选项。您可以在以下位置找到钩子列表以及何时使用它们：https://angular.io/guide/lifecycle-hooks

引导模式弹出窗口时如何调用角度函数

1 个答案: