Angularjs 2 @viewChild 不工作

Question

angularjs 2 的新手，我需要使用 @viewChild 但它会抛出错误 'Cannot read 属性 'rotateLeft' of undefined '。 parent :

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

Child :

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

Answer 1

 *ngIf="holeDocument.ext == 'pdf'"

*ngIf 正在做这个把戏。在满足该条件之前不会呈现元素。

改用[隐藏]。

<pdfReader [imageUrl]="imgsource" [hidden]="holeDocument.ext != 'pdf'"></pdfReader>

Answer 2

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

@ViewChild(PdfReader) public pdfReader: PdfReader;

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

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

另见

Angularjs 2 @viewChild 不工作

Angularjs 2 @viewChild is not working

angularjs-components

angular