如何使用 angular 路由解析器解析来自 api 的数据
How to resolve data from an api using angular route resolver
我正在尝试使用 angular 路由解析器在端点显示之前加载它,但我找不到解决它的方法
如何将 API 的 url 作为参数传递到我的解析器中?
由于某些独特的原因,我需要传入一个参数,因此我无法在服务中传递 api。
这是我的服务
@Injectable()
export class HnService {
constructor(private http: HttpClient) {}
getTopPosts(endpoint) {
return this.http.get(endpoint);
}
}
这是我的解析器文件
@Injectable()
export class HnResolver implements Resolve<any> {
constructor(private hnService: HnService) {}
resolve() {
return this.hnService.getTopPosts(?);
}
}
首先你的路线应该是这样的
{
path: 'hn/:id',
component: HnDetailsComponent,
resolve: {
response: HnResolver
},
}
你的解析器应该喜欢这个
@Injectable()
export class HnResolver implements Resolve<any> {
constructor(private HnService: hnService) {
}
resolve(route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<any> {
return this.hnService.getTopPosts(route.data['id']);
}
}
注:
假设您的路线类似于http://localhost:4200/hn/4
其中 4 是您想要查看详细信息
的 hn 的 ID
在HnDetailsComponent的详细信息中可以访问到hn resolved
export class HnDetailsComponent implements OnInit {
constructor(private route: ActivatedRoute) { }
ngOnInit() {
const myHnResolved = this.route.snapshot.data.response;
console.log(myHnResolved)
}
}
希望能帮到您解决问题。
如果您只想在解析器中传递数据并访问此数据,您可以在定义路径时使用数据 属性。
首先你的路线应该是这样的
{
path: 'hn/:id',
component: HnDetailsComponent,
resolve: {
response: HnResolver
},
data:{
apiURL: 'my/api/url'
}
}
在解析
@Injectable()
export class HnResolver implements Resolve<any> {
constructor(private hnService: HnService) {
}
resolve(route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<any> {
return this.hnService.getTopPosts(route.data['apiURL']);
}
}
我正在尝试使用 angular 路由解析器在端点显示之前加载它,但我找不到解决它的方法 如何将 API 的 url 作为参数传递到我的解析器中? 由于某些独特的原因,我需要传入一个参数,因此我无法在服务中传递 api。
这是我的服务
@Injectable()
export class HnService {
constructor(private http: HttpClient) {}
getTopPosts(endpoint) {
return this.http.get(endpoint);
}
}
这是我的解析器文件
@Injectable()
export class HnResolver implements Resolve<any> {
constructor(private hnService: HnService) {}
resolve() {
return this.hnService.getTopPosts(?);
}
}
首先你的路线应该是这样的
{
path: 'hn/:id',
component: HnDetailsComponent,
resolve: {
response: HnResolver
},
}
你的解析器应该喜欢这个
@Injectable()
export class HnResolver implements Resolve<any> {
constructor(private HnService: hnService) {
}
resolve(route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<any> {
return this.hnService.getTopPosts(route.data['id']);
}
}
注: 假设您的路线类似于http://localhost:4200/hn/4 其中 4 是您想要查看详细信息
的 hn 的 ID在HnDetailsComponent的详细信息中可以访问到hn resolved
export class HnDetailsComponent implements OnInit {
constructor(private route: ActivatedRoute) { }
ngOnInit() {
const myHnResolved = this.route.snapshot.data.response;
console.log(myHnResolved)
}
}
希望能帮到您解决问题。
如果您只想在解析器中传递数据并访问此数据,您可以在定义路径时使用数据 属性。
首先你的路线应该是这样的
{
path: 'hn/:id',
component: HnDetailsComponent,
resolve: {
response: HnResolver
},
data:{
apiURL: 'my/api/url'
}
}
在解析
@Injectable()
export class HnResolver implements Resolve<any> {
constructor(private hnService: HnService) {
}
resolve(route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<any> {
return this.hnService.getTopPosts(route.data['apiURL']);
}
}