Как я могу передавать данные между компонентами с помощью сигналов Angular? ⇐ Javascript

[Anonymous]

Что бы я ни пытался сделать — я не могу придумать, как правильно подключить мой сигнал и где лучше всего его создать.
У меня есть такая авиакомпания:

Код: Выделить всё

import { Injectable, signal } from '@angular/core';
import { catchError, Observable, retry, tap, throwError } from 'rxjs';
import { Flight } from '../models/flight';

@Injectable({
providedIn: 'root'
})
export class FlightService {

private API_URL = 'http://localhost:4963/'

constructor(private http: HttpClient) { }

public initFlights() : Observable {
return this.http.get(this.API_URL + 'flights')
.pipe(
retry(1),
catchError(this._handleError)
)
}

private _handleError(err: HttpErrorResponse) {
console.log('err:', err)
return throwError(() => err)
}
}
< /code>
И я не знаю, должен ли мой компонент иметь свой собственный сигнал для хранения данных и передачи их к другим компонентам или самой службе.
Проблема в том, что Мы говорим о вызове API, и он должен быть завершен. Пустое массив.import { RouterOutlet } from '@angular/router';
import { AppHeaderComponent } from '../cmps/app-header/app-header.component';
import { FilterComponent } from '../cmps/filter/filter.component';
import { SelectedFlight } from '../models/selected-flight';
import { FlightListComponent } from '../cmps/flight-list/flight-list.component';
import { Flight } from '../models/flight';
import { FlightService } from '../services/flight.service';

@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, AppHeaderComponent, FilterComponent, FlightListComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit, OnDestroy {
public flightService = inject(FlightService)
flights_ = signal([])

async ngOnInit(): Promise {
this.flightService.initFlights()
.subscribe({
next: flights => {
this.flights_.set(flights)
}
})
}

ngOnDestroy(): void {
this.flights_.set([])
}

onSelectFlight = (flight: SelectedFlight) => {
console.log('hi')
console.log(flight)
}
}
< /code>
Приложение html < /p>

html-список рейсов

Код: Выделить всё

[list]

[/list]

список рейсов
import { Component, inject, Input, Signal, WritableSignal } from '@angular/core';
import { Flight } from '../../models/flight';
import { CommonModule } from '@angular/common';
import { FlightPreviewComponent } from '../flight-preview/flight-preview.component';

@Component({
selector: 'flight-list',
standalone: true,
templateUrl: './flight-list.component.html',
styleUrl: './flight-list.component.scss',
imports: [CommonModule, FlightPreviewComponent]
})
export class FlightListComponent {

@Input() flights!: WritableSignal

trackByFn = (idx: number, flight: Flight) => {
console.log(flight.flightNumber)
return flight.flightNumber
}

}
< /code>
Я попытался установить данные на сигнал в службе и получить данные из него от других компонентов, но они не будут обновляться, я не могу использовать функцию эффекта в большинстве мест Из моих файлов компонентов TS, вызов API верен (я проверил его с помощью журнала), но я не могу придумать способ иметь сигналы в моем приложении (мое приложение должно поддерживаться сигналами, а не наблюдаемыми) и сделать Поток данных каждый раз, когда он меняется в сигнале. Сам компонент и какой из них должен подписаться? Как мне передавать данные, чтобы я мог идентифицировать их в списке каждый раз, когда он меняется?

Подробнее здесь: https://stackoverflow.com/questions/793 ... ar-signals