ng-bootstra v4：Focus在輸入模塊內部輸入元素

我創建了一個模塊組件，其中包含一些輸入元素NgbModal。當模態打開時，應該打開第一個輸入元素，但是我沒有找到辦法，在模式打開後將輸入元素聚焦。ng-bootstra v4：Focus在輸入模塊內部輸入元素

我可以得到輸入元素（focus-on-newly-added-input-element），但是當我在調用this.modalService.open（...）之後調用它時，它不會集中任何東西，因爲該元素不存在於DOM呢。

所以我必須在模態被渲染後調用它。

這是我到目前爲止有：

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

PS：我發現這個答案angularjs和自舉3：Call function after modal loads angularjs ui bootstrap

來源

2017-09-21 Stefan

應該使用一個分量作爲模態的內容（作爲一個例子示出了NG-自舉文檔），並使用您鏈接的答案中解釋的技術，以便在顯示模式中顯示的組件時顯示輸入 –

This Plunker演示打開一個模式時，重點在輸入欄上。

如果設置的模式了按照「成份爲內容」的例子（而不是「使用默認選項模態」（https://ng-bootstrap.github.io/#/components/modal/examples），您可以Renderer2（如果在NgbdModalComponent構造，並在open()採用了棱角分明4）注入方法，使用下面的代碼集中：

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>

來源

2017-10-01 14:23:39

ng-bootstra v4：Focus在輸入模塊內部輸入元素

回答

相關問題