Angular2 中出现“nativeElement.querySelector 不是函数”异常

Question

我正在尝试访问 Angular2 中的 div，如下所示：

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

但我得到以下异常：

异常：调用节点模块失败并出现错误：TypeError：this.elementRef.nativeElement.querySelector 不是函数

Answer 1

该模板用于angular2-universal服务器端渲染。 https://github.com/angular/universal#universal-gotchas

尝试：

import { Component, AfterContentInit, ViewChild, ElementRef } 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.elementRef.nativeElement as any).querySelector.apply(this.elementRef.nativeElement, ['div']);
        console.log(child);
    }
}

https://angular.io/guide/migration-renderer