,angular"/>
时间戳

首页 > 解决方案 > 如何识别“" 组件或选择器 app-administration-treatment-plan-history

angular - 如何识别“" 组件或选择器 app-administration-treatment-plan-history

问题描述

在 patient-roster-search.component.html 中，当我单击链接时，我调用了方法onViewPatientTreatmentHistory(row)。

在 patient-roster-search-component.ts 文件中，我如何找到AdministrationTreatmentPlanHistoryComponent创建自 的文件<app-administration-treatment-plan-history></app-administration-treatment-plan-history>？或者如何在 Administration-treatment-plan-history.component.ts 中找到选择器 app-administration-treatment-plan-history？

患者名册-component.html：

<div style="display:block" id="patientRosterSearch"><app-patient-roster-search></app-patient-roster-search></div>

<div style="display:none" id="administrationTreatmentPlanHistory"><app-administration-treatment-plan-history></app-administration-treatment-plan-history></div>

患者名册-search.component.html：

<td class="tblRow actionRow small">
  <button type="button" class="btn btn-link" id="{‌{rowData.mrn}}" (click)="onViewPatientTreatmentPlanHistory(rowData)">View</button>
</td>

患者名册搜索component.ts：

onViewPatientTreatmentPlanHistory(item) {
 this.patient = new  AdministrationTreatmentPlanHistoryComponent();
 this.patient.onViewPatientTreatmentPlanHistory(item);
 return this.patient;
}

管理-治疗-计划-history.component.ts：

export class AdministrationTreatmentPlanHistoryComponent implements OnInit {

@Component({
  selector: 'app-administration-treatment-plan-history',
  templateUrl: './administration-treatment-plan-history.component.html',
  styleUrls: ['./administration-treatment-plan-history.component.css']
})

ngOnInit() {
  this.planName = "John Plan";
}

onViewPatientTreatmentPlanHistory(item) {
  document.getElementById("administrationTreatmentPlanHistory").style.display="block";
  document.getElementById("patientRosterSearch").style.display="none";
  this.planName= item.firstName;
}
`````````````

标签： angular

解决方案

这不是实现此目的的“Angular”方式，您错过了框架的一些最佳功能。通常，如果您需要根据值显示/隐藏元素，则应该使用*ngIf绑定。@Input此外，您应该使用和@Output注释在组件之间传递数据。

我不知道正确的类型，但你可以像这样完成它：

患者名册-component.ts：

public selectedPatientPlanHistory;

患者名册-component.html：

<div *ngIf="!selectedPatientPlanHistory"><app-patient-roster-search (onPatientPlanHistorySelect)="selectedPatientPlanHistory = $event"></app-patient-roster-search></div>

<div *ngIf="selectedPatientPlanHistory"><app-administration-treatment-plan-history></app-administration-treatment-plan-history [selectedPatientPlanHistory]="selectedPatientPlanHistory"></div>

患者名册-search.component.html：

<td class="tblRow actionRow small">
  <button type="button" class="btn btn-link" id="{‌{rowData.mrn}}" (click)="onViewPatientTreatmentPlanHistory(rowData)">View</button>
</td>

患者名册搜索component.ts：

@Output()
public onPatientPlanHistorySelect = new EventEmitter();

onViewPatientTreatmentPlanHistory(item) {
  this.onPatientPlanHistorySelect.emit(item);
}

管理-治疗-计划-history.component.ts：

export class AdministrationTreatmentPlanHistoryComponent implements OnInit {

@Component({
  selector: 'app-administration-treatment-plan-history',
  templateUrl: './administration-treatment-plan-history.component.html',
  styleUrls: ['./administration-treatment-plan-history.component.css']
})

@Input()
public selectedPatientPlanHistory;

管理-治疗-计划-history.component.ts：

<div *ngIf="selectedPatientPlanHistory">{{selectedPatientPlanHistory.firstName}}</div>

现在您的两个组件不再相互依赖（它们不是紧密耦合的），并且可以在较小的块中完成修改或调试它们。

我推荐此文档以获取有关此的更多信息。

推荐阅读