在Angular中,可以通过调用服务来传递路由数据。下面是一个示例解决方法:
首先,创建一个名为RouteDataService
的服务,用于存储和获取路由数据。在该服务中,可以使用BehaviorSubject
来存储最新的路由数据,并提供一个公共的Observable
来订阅这些数据的变化。
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class RouteDataService {
private routeDataSubject: BehaviorSubject = new BehaviorSubject(null);
setRouteData(data: any): void {
this.routeDataSubject.next(data);
}
getRouteData(): Observable {
return this.routeDataSubject.asObservable();
}
}
接下来,在需要传递路由数据的组件中,注入RouteDataService
服务,并使用setRouteData
方法来设置路由数据。
import { Component } from '@angular/core';
import { RouteDataService } from 'path/to/route-data.service';
@Component({
selector: 'app-component',
template: `
`
})
export class MyComponent {
constructor(private routeDataService: RouteDataService) {}
navigate(): void {
const routeData = { id: 1, name: 'John' };
this.routeDataService.setRouteData(routeData);
}
}
最后,在接收路由数据的组件中,也注入RouteDataService
服务,并使用getRouteData
方法来获取路由数据。
import { Component, OnInit } from '@angular/core';
import { RouteDataService } from 'path/to/route-data.service';
@Component({
selector: 'app-next-component',
template: `
{{ routeData | async | json }}
`
})
export class NextComponent implements OnInit {
routeData: any;
constructor(private routeDataService: RouteDataService) {}
ngOnInit(): void {
this.routeData = this.routeDataService.getRouteData();
}
}
在上面的示例中,MyComponent
组件通过调用setRouteData
方法将路由数据设置为{ id: 1, name: 'John' }
,然后在NextComponent
组件中通过订阅getRouteData
方法获取到该路由数据,并在模板中展示。
上一篇:Angular无法提供服务