我的首选策略是使用服务。您可以将其创建为单例，以便在加载汽车时它可用于所有组件，或者您可以单独加载它，以便每个组件可以加载不同的汽车。
这是一个示例。
/services/car.service.ts
从您的数据源加载汽车并为您的所有组件提供标准化接口的服务
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
// If you want this to behave as a singleton, add {providedIn: 'root'} to @Injectable
@Injectable()
export class CarService {
private _car = new BehaviorSubject<any>(null);
private _carSnapshot;
// Method called by your components to load a specific car
load(carId: string): Promise<any> {
return this.getCarInfoFromWherever(carId);
}
// Returns an observable of the currently loaded car
car$(): Observable {
return this._car.asObservable();
}
// Method to retrieve the car data from whatever datasource you're using
getCarInfoFromWherever(carId: string): Promise<any> {
return new Promise(async (resolve: any) => {
// Retrieve the car information from wherever it is such as a database.
const carInfo = await DbGetCarInfo(carId);
// Set an object for easy access to current vehicle
this._carSnapshot = carInfo;
// Update your observable
this._car.next(carInfo);
});
}
// Example of abstraction to retrieve car attributes
getType(): string {
if (this._carSnapshot)
return this._carSnapshot['type'];
return null;
}
}
/components/main/main.component.ts
想要显示福特 Pinto 的组件
import { Component } from '@angular/core';
import { distinctUntilChanged } from 'rxjs/operators';
@Component({
selector: 'app-main',
templateUrl: './main.component.html',
styleUrls: ['./main.component.scss']
})
export class MainComponent {
private _subscription;
constructor(
// Inject the CarService into our component
public carSvc: CarService
) {
// Tell CarService which car to load
this.carSvc.load('FordPinto').then();
}
ngOnInit(): void {
// Subscribe to the car service observable
this._subscription = this.carSvc.car$()
.pipe(distinctUntilChanged())
.subscribe((car: any) => {
// The car has been loaded, changed, do something with the data.
console.log("Car Type:", this.carSvc.getType());
});
}
// Unsubscribe from the CarService observable
ngOnDestroy(): void {
this._subscription.unsubscribe();
}
}
/components/dashboard/dashboard.component.ts
想要显示 Ferrari Testarossa 的组件
import { Component, OnInit } from '@angular/core';
import { distinctUntilChanged } from 'rxjs/operators';
@Component({
selector: 'app-dashboard',
// Here's an example of using the observable in a template
template: `<div>{{carSvc.car$() | json}}`,
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit, O {
constructor(
public carSvc: CarService
) {
this.carSvc.load('FerrariTestarossa').then();
}
ngOnInit(): void {
this.carSvc.car$()
.pipe(distinctUntilChanged())
.subscribe((car: any) => {
// Do something with the car information
});
}
// Unsubscribe from the CarService observable
ngOnDestroy(): void {
this._subscription.unsubscribe();
}
}
在本例中，两个独立的组件分别加载到不同的汽车上。