Question

我正在从事有角度的项目，我从ACF选项中获得了首页ID，然后需要向该页面ID发送另一个HTTP请求。

我已经创建了角度解析器，但是我不知道如何发送多个请求

是否有一种方法可以从选项端点获取主页，然后传递给页面端点。

这是我正在尝试的代码。

export class HomeResolverService implements Resolve<any> {

  constructor(private http: HttpClient) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any {
    this.http.get<any>(ACF_OPTIONS).subscribe((res) => {
      return this.http.get<any>(HOME_PAGE + res.acf.home_page).pipe(map((optionsData: any) => {
        return optionsData;
      }));
    });
  }
}

但是此代码返回未定义

Answer 1

问题在于，由于您已经在解析器中进行订阅，因此您不再返回可观察的对象。

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any {
    return this.http.get<any>(ACF_OPTIONS).pipe(
        switchMap(res) => this.http.get<any>(HOME_PAGE + res.acf.home_page)
    );
}

您现在应该在route参数中的已解析参数中收到第二个http调用的返回。

Answer 2

我使用我的插件Xo for Angular进行了类似的操作，该插件提供了一种集成方法来将Angular App作为WordPress中的常规主题加载。

总体问题是WP Rest API没有提供用于使用请求的URL查找页面及其数据的端点。这会产生与上述情况类似的情况，有必要跟踪给定页面/帖子的ID，这在以后可能会出现问题。

我在XoPostsController中使用以下（简化）方法：

<?php

$post_id = 0;

// Check if the url is for the home page
if ($_GET['url'] == '/') {
    $post_id = get_option('page_on_front', 0);
}

// Translate the url to a post id
if (!$post_id) {
    $post_id = url_to_postid($_GET['url']);
}

// Get the wordpress post object if the post was found
if ($post_id) {
    $post = get_post($post_id);
}

// Attempt to get the page by the url
if (!$post) {
    $post = get_page_by_path($_GET['url']);
}

echo json_encode($post);

然后基于API XoPostResolver的简化解析器：

    import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

import { XoPosts } from '../api/posts/posts';
import { XoApiPostsService } from '../api/posts/posts.service';

@Injectable()
export class XoPostResolver implements Resolve<any> {
    constructor(private _postService: XoApiPostsService) { }

    resolve(_route: ActivatedRouteSnapshot, _state: RouterStateSnapshot) {
        return new Promise((resolve, reject) => {
            const url = ((_route.data.url) ? (_route.data.url) : _state.url.split(/[?#]/)[0]);
            this._postService.get(url).subscribe((response: XoPosts.PostsGetResponse) => {
                if (response.success)
                    resolve(response.post);
                reject();
            });
        });
    }
}

希望能奏效！

Angular Resolver问题

2 个答案: