Angular 9 从另一个组件调用 function

Question

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

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

在<app-dashboard>我有一个 function 是这样的：

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

  SendWeatherResult(){

this.weatherResult.emit(results);
}

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

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

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

Answer 1

解释可能更清楚，但也许您需要的是模板变量：

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

如果要从 component.ts 中使用它，请使用viewChild ：

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

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

Answer 2

go 有几种方法可以解决这个问题，但是当我需要多个组件能够在它们之间进行通信和同步数据时，我更喜欢创建一个全局服务。

Stackblitz 展示了它是如何工作的。

weather.service.ts - 可以从任何组件访问的全局服务。

import { Injectable } from "@angular/core";
import { BehaviorSubject, Observable } from "rxjs";

@Injectable({
  providedIn: "root"
})
export class WeatherService {
  private _weatherResult = new BehaviorSubject<any>(null);

  constructor() {
    this.methodToPopulateWeatherResult({ todayis: "sunny" });
  }

  weatherResult$(): Observable<any> {
    return this._weatherResult.asObservable();
  }

  methodToPopulateWeatherResult(report: any): void {
    this._weatherResult.next(report);
  }
}

app.component.ts - 展示如何使用 Observables 以编程方式访问天气结果。

import { Component, OnInit, VERSION } from "@angular/core";
import { distinctUntilChanged } from "rxjs/operators";
import { WeatherService } from "./weather.service";

@Component({
  selector: "my-app",
  template: `
    <h3>Output from app-main</h3>
    {{ report | json }}

    <app-dashboard></app-dashboard>
  `
})
export class AppComponent implements OnInit {
  report: any;

  constructor(private weather: WeatherService) {}

  ngOnInit() {
    this.weather
      .weatherResult$()
      .pipe(distinctUntilChanged())
      .subscribe((report: any) => {
        // Manipulate the updated weather report
        this.report = report;
      });
  }
}

dashboard.component.ts - 展示如何在模板中直接显示天气结果，以及一个按钮来全局更新天气结果。

import { Component, OnInit } from "@angular/core";
import { WeatherService } from "../weather.service";

@Component({
  selector: "app-dashboard",
  template: `
    <h3>Output from app-dashboard</h3>
    <p>
      {{ weather.weatherResult$() | async | json }}
    </p>
    <button (click)="weather.methodToPopulateWeatherResult({ todayis: 'rainy' })">
      Make it Rain
    </button>
    <button (click)="weather.methodToPopulateWeatherResult({ todayis: 'snowy' })">
      Make it Snow
    </button>
  `
})
export class DashboardComponent {
  constructor(public weather: WeatherService) {}
}

Answer 3

我希望我理解你的问题是正确的。

我也是 angular 的新手，但也许这可能有效。

@Input()
SendWeatherResult(){

   return results;
}

<app-dashboard (dateFrom)=OnDateFrom($event)
               [(SendWeatherResult)]="saveReturnValueHere"></app-dashboard>