将另一个组件div Id调用到另一个部件时出现问题

Question

假设我有两个组件："UserPatientsReportFormComponent"；以及"；UserPatientsReportFormTemplateComponent"；。我想打电话给"；UserPatientsReportFormTemplateComponent"；temaplate id为"；UserPatientsReportFormComponent"；。我将分享下面的代码，请告诉我实现它所需的更改。目前我收到一个错误，说无法读取未定义的属性(读取"pdfData"(。

下面的模板代码来自"；UserPatientsReportFormTemplateComponent"；组件

<div id="pdfData" #pdfData>
<table  *ngFor="let hubxReport of hubxReportList; let i=index">
<tr>
<th>{{hubxReport.categoryName}} + "Test"</th>
</tr>
<tr>
<th>{{column}}</th>
</tr>
<tr *ngFor="let item of hubxReport.hubxDataItems">
<td></td>
<td>{{item.itemTitle}}</td>
<td>{{item.itemValue}}</td>
<td>{{item.itemUnit}}</td>
<td>{{item.normalRange}}</td>
</tr>
</table>
</div>

下面的代码用于"；UserPatientsReportFormTemplateComponent"；组件

export class UserPatientsReportFormTemplateComponent implements OnInit {
clientId : number;
hubxReportList : Array<HubxDataModel> = [];
@ViewChild('pdfData') public pdfData: ElementRef;
constructor(private activatedRoute: ActivatedRoute,private usersService: UsersService,private commonService:CommonService) { 
}
ngOnInit(): void {
this.activatedRoute.queryParams.subscribe(params => {
this.clientId = params.id == undefined ? null : this.commonService.encryptValue(params.id, false);
});
this.getHubxReport();
}
getHubxReport() {
debugger
this.usersService.getHubxReport(this.clientId).subscribe((response: ResponseModel) => {
if (response != null && response.data != null && response.data.length > 0) {
this.hubxReportList = response.data;
}
}
);
}
}

从下面的组件中，我试图访问UserPatientsReportFormTemplateComponent模板div Id

export class UserPatientsReportFormComponent implements OnInit {
@ViewChild(UserPatientsReportFormTemplateComponent) userPatientReportFormTemplate: UserPatientsReportFormTemplateComponent; 
}

我正在尝试访问下面这个函数中的模板Id

downloadPDF(isSubmit:any) {  
debugger      
let doc = new jsPDF();
let rows: Array<any> = [];
let header: Array<any> = [];
let medicineInfo: any;
let physicianInfo: any;
let content= this.userPatientReportFormTemplate.pdfData.nativeElement; //---Error comes here---
let _elementHandlers =  
{  
'#editor':function(element,renderer){  
return true;  
}  
};  
doc.fromHTML(content.innerHTML,15,15,{  

'width':190,  
'elementHandlers':_elementHandlers  
}); 

Answer 1

@ViewChild模板查询的可见性范围

这意味着使用@ViewChild执行的查询只能看到组件本身模板内的元素。重要的是要认识到@ViewChild不能用于注入：

其子组件模板内的任何内容并且在父组件的模板中也没有任何内容

请参阅https://blog.angular-university.io/angular-viewchild/了解更多详细信息。

您可以在这里找到组件之间通信的方法来解决您的问题https://www.thirdrocktechkno.com/blog/how-angular-components-communicate/