javascript - 一旦在 Angular 2 中打开，如何将焦点设置在模态元素上？

Question

我是 Angular JS 的新手，使用新版本的 Angular 2，我在执行指令时遇到了麻烦，该指令可以处理单击按钮时打开的模态上的强制焦点。

过去有几个类似的问题，Angular 1 中的答案如下:

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>

谢谢。

Answer 1

当您使用 Angular 2 创建组件时，您使用的语法与 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();   
    }
}

我是在没有检查的情况下从脑海中写下这篇文章的，但这应该让您对应该前进的方向有一个很好的了解。

更新:

当您更新问题时，我认为这是错误的。在您的新代码中，您将焦点设置在构造函数中。可能是您的 View 仍未生成，因此您要设置焦点的元素仍然不可用(在我之前的示例中，我误导了您，因为我在构造函数中实例化了它，当我想要OnInit。对此我深表歉意。)。我会做以下事情:

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();
    }
}

OnInit 是 lifecycle hooks 之一Angular 2 发出的。我建议您通读它们以便在调用它们时更好地理解它们。

更新 2:

问题是 Directives 没有模板。对添加它们的元素执行操作。创建指令时，其构造函数如下所示:

构造函数(私有(private) el:ElementRef，私有(private)渲染器:Renderer){}

el 应该有权访问 this.el.nativeElement.focus()

看看这篇关于 angular.io 的文章 Attribute Directives