引导模式弹出时如何调用角度函数答案

【问题标题】：How can I call angular function when bootstrap modal popup引导模式弹出时如何调用角度函数
【发布时间】：2019-09-24 04:39:05
【问题描述】：

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

【问题讨论】：

你是如何渲染模态的？ GetPermissionsList 函数在哪里？在父母身上？也许你可以把它变成一项服务。你能添加代码来显示你是如何触发模态的吗？
如果你从打开模式的组件中调用它会怎样，例如在按钮点击时。
您是否考虑过使用 ngx-bootstrap 或 ng-bootstrap 代替，这意味着 Angular，让您的生活变得如此轻松......

标签： angular bootstrap-4

【解决方案1】：

您可以从调用模态的同一位置调用函数。如果在用户尝试某个动作时调用了模态框，则该动作应该触发模态框和函数。

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

一旦您调用该函数，对于任何需要更改的信息，您仍然需要让调用的函数更改模态框的内容以更改已呈现的内容。

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

【讨论】：