角解析器问题 [英] Angular Resolver issue

问题描述

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

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

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

这是我正在尝试的代码.

 导出类HomeResolverService实现Resolve< any>{构造函数(私有http:HttpClient){}resolve(route:ActivatedRouteSnapshot，状态:RouterStateSnapshot):Observable< any>|承诺|任何 {this.http.get< any>(ACF_OPTIONS).subscribe((res)=> {返回this.http.get< any>(HOME_PAGE + res.acf.home_page).pipe(map((optionsData:any)=> {返回optionsData;}));});}} 

但是此代码返回未定义

解决方案

我使用我的插件 XoPostsController :

 <?php$ post_id = 0;//检查网址是否为主页如果($ _GET ['url'] =='/'){$ post_id = get_option('page_on_front'，0);}//将网址翻译成帖子ID如果(！$ post_id){$ post_id = url_to_postid($ _ GET ['url']);}//如果找到帖子，则获取wordpress帖子对象如果($ post_id){$ post = get_post($ post_id);}//尝试通过url获取页面如果(！$ post){$ post = get_page_by_path($ _ GET ['url']);}回声json_encode($ post); 

然后基于 API的XoPostResolver :

 从'@ angular/core'导入{可注入}；从'@ angular/router'导入{解析，ActivatedRouteSnapshot，RouterStateSnapshot}；从'../api/posts/posts'导入{XoPosts}；从'../api/posts/posts.service'导入{XoApiPostsService};@Injectable()导出类XoPostResolver实现Resolve< any>.{构造函数(私有_postService:XoApiPostsService){}resolve(_route:ActivatedRouteSnapshot，_state:RouterStateSnapshot){返回新的Promise((resolve，reject)=> {const url =((_route.data.url)?(_route.data.url):_state.url.split(/[?##//[0]));this._postService.get(url).subscribe((response:XoPosts.PostsGetResponse)=> {如果(response.success)解析(response.post);拒绝();});});}} 

希望如此！

I am working on angular project where I get Home page ID from ACF options, and then need to send another HTTP request to that page ID.

I have created angular Resolver, but I don't know how to send this multiple request

Is there a way to get home page from option end point and then pass to pages endpoint.

here is the code what I am trying.

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;
      }));
    });
  }
}

But this code return is undefined

解决方案

I do something similar to this with a plugin of mine, Xo for Angular, which provides an integrated approach to loading an Angular App as a normal theme within WordPress.

The overall problem is that the WP Rest API doesn't provide an endpoint for looking up pages and their data using the requested URL. This creates a situation similar to the above where it is necessary to keep track of the ID of a given page/post which can be problematic down the road.

I use the following (simplified) approach in the 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);

Then a simplified resolver based on XoPostResolver of the API:

    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();
            });
        });
    }
}

Hopefully that works!

这篇关于角解析器问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！