为什么文档为空？

Question

**已更新**，解决方案接近工作：

我正在尝试让我的“跳转到内容”链接跳转到“#content-start”之后的第一个可聚焦元素。

登录-base.component.ts：

import { Component, OnInit } from '@angular/core';
import { Inject, Injectable } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.scss']
})

export class BaseLoginComponent implements OnInit {

    constructor(
        @Inject(DOCUMENT) private document: any
        ) {
    }


    skip() {
        console.log(document);
        console.log(document.querySelector);
        var content = document.querySelector(`#content-start`); // ?? document is null!!
        if (content) {
            var control = content.querySelector('input, button, a');
            console.log(control);
            //if (control) {
            //    control.focus(); // first only
            //}
        }
    };

    ngOnInit() {
        this.document.getElementById('skipLink').onclick = this.skip;
        this.document.getElementById('skipLink').onkeypress = function (e) {
            if (e.keyCode == 13) {
                this.skip();
            }
        }

    }
}

login.component.html：

<div class="login-page">
    <section class="main container" id="content-start">
        <input type="text"/>

这确实有效，因为 console.log(control) 返回

<input _ngcontent-c4="" id="username" name="username">

这实际上是正确的控制。

但我不能只设置 .focus()，因为我拥有的是 HTML sn-p，而不是带有方法的对象，例如 .focus();

呃，有 jQuery 的 $(control) 的 Angular 等价物吗？

Answer 1

这是因为 DOM 尚未加载到 ngOnInit 中。更新你的代码看起来像这样，实现AfterViewInit:

export class AppComponent implements AfterViewInit{
constructor(
    @Inject(DOCUMENT) private document: any
) { }
}

ngAfterViewInit() {

    this.document.getElementById('skipLink').onclick = skipLink;
    this.document.getElementById('skipLink').onkeypress = function (e) {
        if (e.keyCode == 13) {
            skipLink();
        }
    }

    function skipLink() {
        let content: HTMLElement = this.document.querySelector("#content-start"); // ?? document is null!!
        if (content) {
            let control: HTMLElement = this.document.querySelector('input, button, a');
            console.log(control);
            if (control) {
                // control.focus(); // first only
            }
        }
    }
}

ngAfterViewInit 就像它听起来的那样；它仅在最初加载视图后运行。

根据您的问题进行编辑：您正在寻找angular.element。这方面的文档真的很有帮助，并且是在 Angular 中操作元素的更好的编程实践。

Answer 2

正如您所发现的，skipLink 应该是您的组件类的一个方法。为了在skipLink 内部保持正确的this，您可以使用addEventListener 和箭头函数设置事件处理程序：

public ngOnInit() {
    this.document.getElementById('skipLink').addEventListener("click", () => { 
      this.skipLink(); 
    });
    this.document.getElementById('skipLink').addEventListener("keypress", (e) => {
        if (e.keyCode == 13) {
            this.skipLink();
        }
    }
}

private skipLink() {
    let control: HTMLElement = this.document.querySelector('input, button, a');
    if (control) {
        control.focus();
    }
}

您可以在this plunker 中查看代码。

---

正如Kevin 所述，使用ViewChild 是一种更标准的方式来引用组件中的元素。您可以在目标元素上定义一个模板引用变量（例如下面组件模板中的#firstButton），使用ViewChild 获取对它的引用，并使用nativeElement 属性获取HTML 元素本身。至于事件处理程序，您可以使用 Angular 绑定来设置它们（例如(click)="skipLink()"）。

该方法显示在this plunker:

import { Component, NgModule, Inject, ElementRef, ViewChild } from '@angular/core';
...

@Component({
    selector: 'my-app',
    template: `
        <button #firstButton>Focusable Button</button>
        <br/>
        <button (click)="skipLink()">Click here to set focus on first button</button>
    `,
    ...
})
export class App {

    @ViewChild("firstButton") private firstButton: ElementRef;

    private skipLink() {
        this.firstButton.nativeElement.focus();
    }
}   

Answer 3

这与最初的实现相差甚远；如果我更新开头的帖子，那么 cmets 将毫无意义。

按照 Kevin 的建议按照 Using ViewChild in Angular to Access a Child Component, Directive or DOM Element 实施，（除非我有误解）：

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

export class AppComponent {

    @ViewChild('firstControl') firstControl: ElementRef;

    skipLink() {
        console.log(this.firstControl);
        //if (this.firstControl) { this.firstControl.focus(); }
    };

.

<a href="#content-start" id="skipLink" (click)="skipLink()">Skip to main content</a>

不幸的是，这也好不到哪里去。 this.firstControl 未定义。