получение исключения «nativeElement.querySelector не является функцией» в Angular2

Я пытаюсь получить доступ к div в Angular2, как показано ниже:

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

@Component({
    selector: 'main',
    template: `
    <div  #target class="parent">
        <div class="child">
        </div>
    </div>
  `
})

export class MainComponent implements AfterContentInit {
    @ViewChild('target') elementRef: ElementRef;

    ngAfterContentInit(): void {
        var child = this.elementRef.nativeElement.querySelector('div');
        console.log(child);
    }
}

но я получаю следующее исключение:

Исключение: сбой модуля Call to Node с ошибкой: TypeError: this.elementRef.nativeElement.querySelector не является функцией


angular angular-universal viewchild
person mohsen    schedule 22.02.2017    source источник
comment
Странно, что ElementRef.nativeElement имеет тип any. Какую версию angular вы используете или как выглядит ваш package.json?   -  person William Lohan    schedule 23.02.2017
comment
я использую угловой 2.0.0. не должно работать с этой версией?   -  person mohsen    schedule 27.02.2017
comment
Это должно работать и работает здесь plnkr.co/edit/fRsQot7KtIAUGSIIZdKA   -  person William Lohan    schedule 27.02.2017
comment
да, должно работать, но не работает. я также обновляю свой проект до Angular 2.4.5, но результат тот же. я не могу понять почему.   -  person mohsen    schedule 01.03.2017
comment
Можете ли вы опубликовать полный код, где он не работает?   -  person William Lohan    schedule 01.03.2017
comment
я использую telerik.com/blogs/cooking- with-aspnet-core-and-angular-2 для моего проекта, в котором возникла проблема. но когда я использую plnkr, он работает нормально. также, если я использую простой проект angular2 без этого шаблона, он также работает нормально   -  person mohsen    schedule 02.03.2017

Ответы (1)


arrow_upward
2
arrow_downward

Этот шаблон использует angular2-universal для рендеринга на стороне сервера. https://github.com/angular/universal#universal-gotchas

Пытаться:

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

@Component({
    selector: 'main',
    template: `
    <div  #target class="parent">
        <div class="child">
        </div>
    </div>
`
})
export class MainComponent implements AfterContentInit {
    @ViewChild('target') elementRef: ElementRef;

    constructor(private renderer: Renderer) {}

    ngAfterContentInit(): void {
        var child = this.renderer.invokeElementMethod(this.elementRef.nativeElement, 'querySelector', ['div']);
        console.log(child);
    }
}
person William Lohan    schedule 02.03.2017
comment
Теперь это устарело. У кого-нибудь есть обновленный ответ? - person William Lohan; 12.09.2017