Angular2从Wordpress WP API获取页面数据

Question

I'm using Wordpress WP API to parse data into my Angular2 app.

I need to get data to populate my pages and I need to get the page SLUG based on the ActivatedRoute. However, I'm not sure how to achieve this. In the "projects" page I need to have page data.

This is an example Json of my data for a page:

[{
  "id":16,
  "date":"2015-06-24T11:44:03",
  "slug":"projects",
  "type":"page",
  "title":{"rendered":"Projects"}
}]

First, I created a Page Service:

@Injectable()
export class PageService {

constructor(private http: Http) {}

getPage(slug): Observable<Page>  {

    return this.http
        .get(`${PROJECT_API}pages?slug=${slug}`)
        .map((res: Response) => res.json());
}

}

Then, in my app.component I try to get the activated route parameters, parse the SLUG into the getPage function from my Service:

export class AppComponent implements OnInit {

   page: Page[]; // Interface of Page

   constructor(
       private router: Router,
       private activatedRoute: ActivatedRoute,
       private pageService: PageService
   ) {}

   ngOnInit() {
        this.activatedRoute.params
          .switchMap((data: Page) =>   this.pageService.getPage(data.slug))
          .subscribe((data: Page) => {
            console.log(data[0])
            this.page = data[0]
          });

   }

}

In my console I get "undefined".

I want for each page to dynamically get the page SLUG from the ActivatedRoute and fetch the data to populate each page.

For each page (component template), I can then simply parse:

<h1>{{ page?.title.rendered }}</h1>

What am I missing here?

Answer 1

I am working on a plugin, Xo for Angular, that sounds like the perfect solution to this situation.

https://wordpress.org/plugins/xo-for-angular/

Main concepts:

• Your Angular App is loaded and exists as a theme within WordPress.
• Angular templates (modules) which can be selected for pages and posts.
• Dynamic routing of pages, posts, and other content created in WordPress.

Using the Xo API it is easy to get the data for any page or post within your WordPress. For instance: https://angularxo.io/xo-api/posts/get?url=/

This retrieves the full post object with additions such as meta and ACF fields if configured.

Xo also generates all the routes dynamically, this lets you define the page structures as normal through WordPress. There is no need to retrieve a page or post by its slug since both WordPress and Angular as Xo keeps them in complete synchronization.

Example dynamic routes: https://angularxo.io/xo-api/routes/get

There is also a node module angular-xo that gives a built in resolver to retrieve this data for each page view and make that data available in your template.

More about this feature: https://angularxo.io/guides/routing

Example theme which uses Xo: https://github.com/WarriorRocker/angular-xo-material

More docs (work in progress): https://angularxo.io/