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

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

Answer 2

我正在像这样使用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）