angular - AngularJS 2 @viewChild不起作用

对于angularjs 2，我需要使用@viewchild，但它会抛出错误，因为“无法读取未定义的”rotateleft“属性”。
起源：

<div><pdfReader [imageUrl]="imgsource" *ngIf="holeDocument.ext == 'pdf'"></pdfReader></div>

TS

import { Component ,ViewChild } from '@angular/core';
import {PdfReader} from "../../shared/pdfreader/pdfReader";
@Component({
selector: 'docView',
templateUrl: 'docView.html',
styleUrls : ["docView.less"]
})
export class DocViewComponent{
@ViewChild('PdfReader') public pdfReader: PdfReader;
constructor(){}
ngAfterViewInit(){
    this.imageRotate();
}
imageRotate(){
this.pdfReader.rotateLeft();
}}

孩子：

@Component({
selector: 'pdfReader',
templateUrl: 'pdfReader.html'
})
export class PdfReader{
 @Input() imageUrl : any;
 rotateLeft(){
        console.log('rotateLeft called');
        this.rotationAngel -= 90;
    }
}

最佳答案

如果使用组件类型进行查询，则引号是多余的

@ViewChild(PdfReader) public pdfReader: PdfReader;

如果使用字符串作为查询，则需要有匹配的模板变量

<div><pdfReader #PdfReader [imageUrl]="imgsource" *ngIf="holeDocument.ext == 'pdf'"></pdfReader></div>

另见angular 2 / typescript : get hold of an element in the template

关于angular - AngularJS 2 @viewChild不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42003790/