ng-bootstrap v4：打开模态后焦点输入元素

Question

我使用 NgbModal 创建了一个模态组件，其中包含一些输入元素。当模式打开时，第一个输入元素应该被打开，但是我没有找到一种方法，在模式打开后聚焦输入元素。

我可以获得输入元素 ()，但是当我在调用`this.modalService.open(...) 之后调用它时，它不会聚焦任何东西，因为元素DOM 中尚不存在。

所以我必须在呈现模式后调用它。

这是我目前拥有的：

open(content) {
    this.modalService.open(content, { size: 'lg' });
    // TODO
}

PS：我找到了 angularjs 和 boostrap 3 的答案：Call function after modal loads angularjs ui bootstrap

Answer 1

This Plunker 演示了在打开模态框时关注输入字段。

如果您在 NgbdModalComponent 并且在open() 方法中，使用下面的代码来聚焦：

let inputElement = this.renderer.selectRootElement('#focusMe');
inputElement.focus();

模态对应的HTML是：

<div class="modal-header">
  <h4 class="modal-title">Hi there!</h4>
  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <p>Hello, {{name}}!</p>
  <input type="text" id="focusMe" />
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
</div>

Answer 2

为模态主体使用模板，并在要聚焦的元素上使用 ngbAutoFocus 指令

添加用户-modal.component.html

<ng-template #content let-modal>
  <common-modal title="Invite your Teammates" [buttons]="buttons" [modal]="modal">
      <label for="emails">Enter your team members' email addresses to grant them access to your team's account. Enter one email address per line.</label>
      <textarea ngbAutoFocus id="emails" class="form-control" placeholder="Emails" [formControl]="emailsFormControl"></textarea>
  </common-modal>
</ng-template>

modal.componenent.html

<div class="modal-header">
  <div class="title-container">
    <h4 class="modal-title" id="modal-basic-title">{{ title }}</h4>
  </div>
  <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <ng-content></ng-content>
</div>
<div class="modal-footer">
  <ng-container *ngFor="let button of buttons">
    <button type="button" [class]="button.style" [disabled]="button.disabled"
      (click)="modal.close(button.resultIfClicked)">{{ button.text }}</button>
  </ng-container>
</div>

ng-bootstrap v4：打开模态后焦点输入元素

ng-bootstra v4: Focus Input element inside modal after opeing it

ng-bootstrap

angular