为什么文档为空? [英] Why is document null?

问题描述

**已更新**，并提供了一种接近工作的解决方案:

**UPDATED ** with a solution that comes close to working:

我正在尝试获取我的跳至内容"链接，以跳转到#content-start"之后的第一个可聚焦元素.

I'm trying to get my 'skip to content' link to jump to the first focusable element after '#content-start'.

login-base.component.ts:

login-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:

login.component.html:

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

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

This actually works, inasmuch as console.log(control) returns

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

实际上是正确的控件.

但是我不能只设置.focus()，因为我有一个HTML代码段，而不是带有方法的对象，例如.focus();

But I can't just set .focus() because what I have there is an HTML snippet, not an object with methods, such as .focus();

嗯，jQuery的$(control)的对角线等效吗?

Uh, is there an angular equivalent of jQuery's $(control)?

推荐答案

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

As you found out, skipLink should be a method of your component class. In order to maintain the correct this inside of skipLink, you can set the event handlers with addEventListener and arrow functions:

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

您可以在 此插栓器 .

You can see the code at work in this plunker.

如 Kevin 所述，使用ViewChild是引用组件中元素的更标准方法.您可以在目标元素上定义模板引用变量(例如，下面的组件模板中的#firstButton)，使用ViewChild获取对其的引用，并使用nativeElement属性获取HTML元素本身.对于事件处理程序，可以使用Angular绑定(例如(click)="skipLink()")进行设置.

As mentioned by Kevin, using ViewChild is a more standard way to refer to an element in a component. You can define a template reference variable on the target element (e.g. #firstButton in the component template below), get a reference to it with ViewChild, and get the HTML element itself with the nativeElement property. As for the event handlers, you can set them with Angular binding (e.g. (click)="skipLink()").

该方法显示在 此监听器 中:

That method is shown in 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();
    }
}   

这篇关于为什么文档为空?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！