Javascript 在Angular 2中打开模态元素后，如何将焦点设置在这些元素上？

我是Angular JS的新手，随着Angular 2新版本的推出，我在执行指令时遇到了麻烦，该指令可以处理点击按钮打开的模态上的力焦点

过去曾提出过几个类似的问题，答案如下：

app.directive('focusMe',
    ['$timeout',
        function ($timeout) {
            return {
                link: {
                    pre: function preLink(scope, element, attr) {
                      // ...
                    },
                    post: function postLink(scope, element, attr) {
                        $timeout(function () {
                            element[0].focus();
                        }, 0);

                    }
                }
            }
        }]);
});

我试图在Angular 2中转换这段代码。但我不知道如何实现这一目标。有谁能给我提供更多关于如何实现这一目标的信息，为我指明正确的方向

编辑：

我尝试按如下方式实现该指令，当我调试代码时，我甚至看到正在调用该指令，但我仍然无法获得模态对话框上元素的焦点：

import { Directive, ElementRef } from "@angular/core";

@Directive({
    selector: "[ModFocus]"
})

export class ModalFocus {

    constructor(private _el: ElementRef) {

        this._el.nativeElement.focus();
    }

}

我做错什么了吗？或者除了在nativeElement上调用focus（）之外，我还需要做其他事情吗

HTML模式：

<div class="modal-dialog modal-sm" tabindex="-1">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Are you sure?</h4>
            </div>
            <div class="modal-body">
                Warning
            </div>
        <div class="modal-footer ok-cancel" ModFocus>
                <button type="button" class="btn btn-default" (click)="cancel()">Cancel</button>
                <button type="button" class="btn btn-primary" (click)="delete()" data-dismiss="modal">Delete</button>
            </div>
        </div>
    </div>

你确定吗？
警告
取消
删除

---

谢谢。

使用Angular2创建组件时，使用的语法与AngularJS不同。您的示例代码可能如下所示：

import { Component, ElementRef, ViewChild } from "@angular/core";

@Component({
    selector: "whatever",
    template: `<input #myControl type='input'/>`
})
export class MyComponent {
    @ViewChild("myControl") myCtrl: ElementRef;

    constructor () {
        // This is wrong. It should be done in ngOnInit not in the
        // constructor as the element might not yet be available.
        //this.myCtrl.nativeElement.focus();   
    }
}

OnInit

是Angular 2发射的其中一种。我建议您在调用它们时仔细阅读它们，以便更好地理解它们

更新2： 问题是

指令

没有模板。对被添加到元素上的行为。创建指令时，其构造函数如下所示：

构造函数（private el:ElementRef，private renderer:renderer）{}

el

应该可以访问

this.el.nativeElement.focus（）

---

请看angular.io上的这篇文章，内容是关于我的问题中指令的实现实际上是正确的。焦点没有进入模态的问题是因为tabindex=-1的位置错误

以下是我创建的指令。我再也没有直接用过。相反，我使用渲染器作为明确提到的角度文档，以避免使用标记的类

HTML:

你确定吗？
警告
取消
删除

在上面的html中，我实际上丢失了带有类modal fade的主标记上的tabindex。在那里添加tabindex将焦点转移到打开时模式上的按钮上

---

Husein提供了非常有用的宝贵意见。因此，我接受他的回答。再次感谢Husein。

AngularJS和Angular2是两个不同的世界。我建议您阅读angular.io教程，了解Angular2的工作原理。实际上，我想创建一个指令，而不是组件！但它有帮助：）我对这个问题进行了编辑。你能看一下让我知道怎么了吗？我试过你的方法，但失败了。@ShellZero，你来了。我想这可能会解决你的问题。另外，对于上一个答案中的错误方法，我深表歉意：（没问题@Husein我也试过了。但我不确定，为什么我看不到模态元素上的焦点！当我检查它时，我清楚地显示了模态页脚的button类，但它没有给我焦点！！我添加了更多代码，现在你可以看到模态的外观。我想可能是tabindex的问题？我甚至在rem之后尝试过看了还是不行。我想不出来！：|

import { Directive, ElementRef, OnInit } from "@angular/core";

@Directive({
    selector: "[ModFocus]"
})

export class ModalFocus implements OnInit {

    constructor(private _el: ElementRef) {

    }

    ngOnInit(): any {
        // At this point, your element should be available.
        this._el.nativeElement.focus();
    }
}

import { Directive, ElementRef, Renderer} from "@angular/core";
@Directive({
    selector: "[ModFocus]"
})

export class modalFocus {
    constructor(private _el: ElementRef, private renderer: Renderer) {
        this.renderer.invokeElementMethod(this._el.nativeElement, 'focus');
    }

}

<div class="modal fade" tabindex="-1"> 
<div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Are you sure?</h4>
            </div>
            <div class="modal-body">
                Warning
            </div>
        <div class="modal-footer ok-cancel">
                <button type="button" class="btn btn-default" (click)="cancel()" ModFocus>Cancel</button>
                <button type="button" class="btn btn-primary" (click)="delete()" data-dismiss="modal">Delete</button>
            </div>
        </div>
    </div>
</div>