각도 ViewChild fileInput 주석이 정의되지 않았습니다.

Question

내 fileInput 요소가 일반 div에 있으면 제대로 작동합니다. 그러나 만약 내가 그것을 <ng-template></ng-template> 안에 넣으면 나는 그것을 정의하지 않고있다. 여기

내 코드입니다 :

HTML

<ng-template #content let-c="close" let-d="dismiss"> 
    <div class="modal-header"> 
     <h4 class="modal-title">Modal title</h4> 
     <button type="button" class="close" aria-label="Close" (click)="d('Cross click')"></button> 
    </div> 
    <div class="modal-body"> 
     <form #documentsForm="ngForm" (ngSubmit)="onEditSubscriberDocumentsSubmit(documentsForm.value);documentsForm.reset()"> 
     <input #fileInput type="file" #select name="document" [(ngModel)]="document" (click)="onDocUpload()" />  
     <input type="submit" value="Save" class="btn btn-success" [hidden]="addDocHidden"> 
     </form> 
    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button> 
    </div> 
</ng-template> 

TS

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

export class EditSubscriberComponent { 
    constructor(private http: Http, private route: ActivatedRoute, private router: Router, private modalService: NgbModal) { } 
    @ViewChild("fileInput") fileInput: ElementRef; 
    ngOnInit() { 
     console.log(this.fileInput) 
     // This is undefined. If I place the <input #fileInput type="file"> 
     // in the main div,not under ng-template, then I am getting the 
     // desired output 
    } 
} 

나에게 어떻게 교류를 할 수 있습니다 제안하십시오 NG-템플릿에서 운의 ViewChild는

Answer 1

당신은 세터 사용할 수 있습니다 :

@ViewChild("fileInput") 
set fileInput(val: ElementRef) { 
    if(val) { 
    console.log(val); 
    } 
} 

또는 @ViewChildren 변경에 가입 :

@ViewChildren("fileInput") fileInputs: QueryList<ElementRef>; 

ngAfterViewInit() { 
    this.fileInputs.changes.subscribe(x => { 
    if(x.length) { 
     console.log(x[0]); 
    } 
    }) 
} 

또는 당신이 정확하게 알고있는 경우에 템플릿이 초기화 될 때 그럼 그냥 @ViewChild를 사용

@ViewChild("fileInput") fileInput: ElementRef; 

... 
this.vcRef.createEmbeddedView(this.template); // pseudo code 
console.log(this.fileInput);