你好，我正在尝试学习Angular ，现在碰到了一堵墙。所以基本上我正在尝试做的是改变城市的天气数据，这是在一个组件与点击主页组件，在主页组件有4个城市在一个网格，每当用户点击任何一个它重定向到组件与数据（温度、时间湿度等），数据根据他在登陆主页上点击的城市而变化。目前日期固定为特定日期和城市。我对如何使这个工作以及组件之间的数据绑定如何工作感到非常困惑。有人能帮忙吗？
这是我的html天气数据组件，应该根据从主页点击城市更新

<p-table
      #dt
      [value]="lazyWeatherData"
      dataKey="id"
      [columns]="cols"
      [scrollable]="true"
      [tableStyle]="{ 'min-width': '50rem' }"
      scrollHeight="flex"
      [globalFilterFields]="['time','temperature','humidity','wind', 'pressure', 'direction', 'precipitation', 'rain', 'cloudcover','soilTemperature']"
      [rows]="10"
      [paginator]="true"
      [lazy]="true"
      (onLazyLoad)="loadData($event)"
      [loading]="loading"
    >
    <ng-template pTemplate="caption">
      <div *ngIf="filterSwitch" class="flex">
          <button pButton label="Clear"
          class="p-button-outlined"
          icon="pi pi-filter-slash"
          (click)="clearFilters(dt)">
        </button>
          <span >
              <i class="pi pi-search"></i>
              <input
              class="filter-input"
              pInputText
              type="text"
              (input)="dt.filterGlobal($event.target.value, 'contains')" />
          </span>
      </div>
  </ng-template>
      <ng-template pTemplate="header" let-columns>
        <tr class="icons">
          <th
          style="min-width:250px"
          [pSortableColumn]="col.field"
          *ngFor="let col of columns">
            <fa-icon [icon]="col.icon"></fa-icon>
            {{col.header}}
            <p-sortIcon [field]="col.field"></p-sortIcon>
            <p-columnFilter
            *ngIf="filterSwitch"
            [type]="col.type"
            display="menu"
            [field]="col.field">
          </p-columnFilter>
          </th>
      </ng-template>
      <ng-template pTemplate="body" let-lazy let-columns="columns">
        <tr>
          <td *ngFor="let col of columns">{{ lazy[col.field] + col.value }}</td>
        </tr>
      </ng-template>
    </p-table>

这是ts

@Component({
  selector: 'app-weather-data',
  templateUrl: './weather-data.component.html',
  styleUrls: ['./weather-data.component.scss'],
})
export class WeatherDataComponent implements OnInit, OnDestroy {
  @ViewChild('dt') table: Table;
  @Output() city = 'London';
  showError: string;
  weatherData: WeatherDataItem[] = [];
  private componentDestroyed$: Subject<boolean> = new Subject();
  weatherDataLoading: boolean;
  icons: IconDefinition[] = [
    faClock,
    faTemperatureHigh,
    faPercent,
    faWind,
    faGem,
    faDirections,
    faWater,
    faCloud,
  ];
  cols: WeatherDataCol[];
  loading = false;
  lazyWeatherData: any = [];

  constructor(
    private weatherService: WeatherService,
    public datePipe: DatePipe
  ) {
    this.cols = [
      new WeatherDataCol('time', 'Time', 'text', '', this.icons[0]),
      new WeatherDataCol(
        'temperature',
        'Temperature',
        'text',
        '°C',
        this.icons[1]
      ),
      new WeatherDataCol('humidity', 'Humidity', 'numeric', '%', this.icons[2]),
      new WeatherDataCol('wind', 'Wind Speed', 'text', ' km/h', this.icons[3]),
      new WeatherDataCol(
        'pressure',
        'Air Pressure',
        'text',
        ' hPa',
        this.icons[4]
      ),
      new WeatherDataCol(
        'direction',
        'Wind Direction',
        'numeric',
        '°',
        this.icons[5]
      ),
      new WeatherDataCol(
        'precipitation',
        'Precipitation',
        'numeric',
        'mm',
        this.icons[6]
      ),
      new WeatherDataCol('rain', 'Rain', 'numeric', 'mm', this.icons[6]),
      new WeatherDataCol(
        'cloudcover',
        'Cloudcover',
        'numeric',
        'mm',
        this.icons[7]
      ),
      new WeatherDataCol(
        'soilTemperature',
        'Soil Temperature',
        'text',
        '°C',
        this.icons[1]
      ),
    ];
  }

  ngOnInit(): void {
    this.weatherDataLoading = true;
    this.weatherService
      .getWeatherData()
      .pipe(
        finalize(() => (this.weatherDataLoading = false)),
        takeUntil(this.componentDestroyed$)
      )
      .subscribe({
        next: (historicalWeatherData) => {
          const temperatures = historicalWeatherData.hourly.temperature_2m;
          const times = historicalWeatherData.hourly.time.map((time) =>
            this.datePipe.transform(time, 'shortTime')
          );
          const humidities = historicalWeatherData.hourly.relativehumidity_2m;
          const windSpeeds = historicalWeatherData.hourly.windspeed_10m;
          const airPressures = historicalWeatherData.hourly.surface_pressure;
          const windDirections = historicalWeatherData.hourly.winddirection_10m;
          const precipitations = historicalWeatherData.hourly.precipitation;
          const rain = historicalWeatherData.hourly.rain;
          const cloudcover = historicalWeatherData.hourly.cloudcover;
          const soilTemperatures =
            historicalWeatherData.hourly.soil_temperature_0_to_7cm;

          temperatures.forEach((value, i) => {
            this.weatherData.push(
              new WeatherDataItem(
                value,
                times[i],
                humidities[i],
                windSpeeds[i],
                airPressures[i],
                windDirections[i],
                precipitations[i],
                rain[i],
                cloudcover[i],
                soilTemperatures[i]
              )
            );
          });
        },
        error: () =>
          (this.showError =
            'Something went wrong. Please try refreshing the page'),
      });
    this.loading = true;
  }

  loadData(event: LazyLoadEvent) {
    this.loading = true;
    setTimeout(() => {
      if (this.weatherData) {
        this.lazyWeatherData = this.weatherData.slice(
          event.first,
          event.first + event.rows
        );
        this.loading = false;
        console.log(this.lazyWeatherData);
      }
    }, 1000);
  }

  clearFilters(table: Table) {
    table.clear();
  }

  ngOnDestroy(): void {
    this.componentDestroyed$.next(true);
    this.componentDestroyed$.complete();
  }
}

这是主页组件html

<div class="container">
  <div class="grid">
    <a routerLink="/weather-data"><h3>London</h3></a>
    <a routerLink="/weather-data"><h3>New York</h3></a>
    <a routerLink="/weather-data"><h3>Tokyo</h3></a>
    <a routerLink="/weather-data"><h3>Sydney</h3></a> 
</div>

时间

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
})
export class HomeComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {}

  changeCity() {}
}

这是从API获取数据天气服务

@Injectable({
  providedIn: 'root',
})
export class WeatherService {
  constructor(private http: HttpClient) {}

  getWeatherData(): Observable<WeatherData> {
    return this.http.get<WeatherData>(
      `https://archive-api.open-meteo.com/v1/era5?latitude=51.51&longitude=-0.13&start_date=2005-08-25&end_date=2005-08-25&hourly=temperature_2m,relativehumidity_2m,dewpoint_2m,apparent_temperature,surface_pressure,precipitation,rain,cloudcover,windspeed_10m,winddirection_10m,soil_temperature_0_to_7cm`
    );
  }
}

基本上，我需要根据用户在主页中点击的城市更改天气服务URL中的纬度和经度，然后将其重定向到包含该城市更新数据的天气数据组件。我如何实现这一点？目前，纬度和经度默认设置为伦敦