来自另一个组件的 Angular 9 调用函数

Question

我有一个组件让我已经在使用它的 app-main 另一个组件及其事件发射器:

<app-dashboard (dateFrom)=OnDateFrom($event) ></app-dashboard>

在<app-dashboard>我有一个这样的函数:

@Output() weatherResult= new EventEmitter<any>();

  SendWeatherResult(){

this.weatherResult.emit(results);
}

现在我需要调用 SendWeatherResult在我的组件中运行

<app-dashboard (dateFrom)=OnDateFrom($event) //here i need to call this function></app-dashboard>

我想在我的主应用程序中调用 SendWeatherResult 函数

Answer 1

解释可能更清楚，但也许您需要的是 template variables :

<app-dashboard #appDashboard (dateFrom)=OnDateFrom($event)></app-dashboard>
<button (click)="appDashboard.SendWeatherResult()"> Send weather result</button>

如果你想从组件 .ts 中使用它，请使用 viewChild :

@ViewChild('appDashboard', { static: false }) appDashboard: DashboardComponent;

callSendWeatherResult(): void {
this.appDashboard.SendWeatherResult()
}