引导模式

Question

我有一个Angular2应用程序，我使用bootstrap模型使用数据切换向用户显示确认对话框，如下所示

<button *ngIf="!profileModel.isDeleted" type="button" data-toggle="modal" [hidden]="profileId == null" data-target="#confirmProfileDeleteModal"
    class="left-align drs-btn-primary"><i class="fa fa-trash-o"></i> Delete
</button>

<div class="modal fade" id="confirmProfileDeleteModal" role="dialog" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-md" style="margin-top: 20%;">
        <div class="modal-content">
            <div class="modal-header">
                <p><i class="fa fa-4x fa-exclamation-circle"></i>If you continue the selected record will be deleted</p>
            </div>
            <div class="modal-body">
                <p>If you continue the selected record will be deleted.</p>
            </div>
            <div class="modal-footer">
                <button type="button" (click)="deleteProfile()" class="btn btn-primary" data-dismiss="modal">Yes
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
            </div>
        </div>
    </div>
</div>

所有作品都找到并且对话框显示但是我希望能够专注于对话框中的主要按钮（例如，带有类btn-primary的按钮）

我尝试在ngAfterViewInit中添加脚本来处理shown.bs.modal事件并将焦点设置在主按钮上，但这不起作用

ngAfterViewInit() {
    $(document).ready(function() {
        $(".modal").on("shown.bs.modal", function() {
            $(this).find(".btn-primary").focus() // also tried wrapping in setTimeout
        });
    });
}

我想知道的是有没有人遇到过这个以及他们如何将按钮集中在一个引导模态上？

修改

还应该注意的是，我在app.component.ts文件中有这个代码，接着来自@Kevin的答案我尝试将代码移动到配置文件的组件类中，这现在可以工作。

我不想要做的是在我的所有组件中都有这个代码，而是将代码放在一个地方，全局适用于所有模态对话框，如何用Angular2完成？

Answer 1

[我只是评论这个，但我还没有足够的声誉]

您的代码看起来正确，但您正在使用ngAfterViewInit和$（document）.ready。只有在页面加载后才尝试调用处理程序。

ngAfterViewInit() {
    $(".modal").on("shown.bs.modal", function() {
        $(this).find(".btn-primary").focus() // also tried wrapping in setTimeout
    });
};