我想在我的wordpress网站中显示特定类别的所有帖子,例如工作,ID 1 到我的Ionic应用中的WorksPage。
以下是显示主页/主屏幕上所有最新帖子的代码。 HOMEPAGE / ALL - home.ts
import { Component } from '@angular/core';
import { PostPage } from '../post/post';
import { NavController, LoadingController, NavParams } from 'ionic-angular';
import { WordpressService } from '../../services/wordpress.service';
import { AuthenticationService } from '../../services/authentication.service';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
posts: Array<any> = new Array<any>();
morePagesAvailable: boolean = true;
loggedUser: boolean = false;
categoryId: number;
categoryTitle: string;
constructor(
public navCtrl: NavController,
public navParams: NavParams,
public loadingCtrl: LoadingController,
public wordpressService: WordpressService,
public authenticationService: AuthenticationService
) {}
ionViewWillEnter() {
this.authenticationService.getUser()
.then(
data => this.loggedUser = true,
error => this.loggedUser = false
);
this.morePagesAvailable = true;
//if we are browsing a category
this.categoryId = this.navParams.get('id');
this.categoryTitle = this.navParams.get('title');
if(!(this.posts.length > 0)){
let loading = this.loadingCtrl.create();
loading.present();
this.wordpressService.getRecentPosts(this.categoryId)
.subscribe(data => {
for(let post of data){
post.excerpt.rendered = post.excerpt.rendered.split('<a')[0] + "</p>";
this.posts.push(post);
}
loading.dismiss();
});
}
}
postTapped(event, post) {
this.navCtrl.push(PostPage, {
item: post
});
}
doRefresh(refresher) {
console.log('Begin async operation', refresher);
setTimeout(() => {
console.log('Async operation has ended');
refresher.complete();
}, 2000);
}
doInfinite(infiniteScroll) {
let page = (Math.ceil(this.posts.length/10)) + 1;
let loading = true;
this.wordpressService.getRecentPosts(this.categoryId, page)
.subscribe(data => {
for(let post of data){
if(!loading){
infiniteScroll.complete();
}
post.excerpt.rendered = post.excerpt.rendered.split('<a')[0] + "</p>";
this.posts.push(post);
loading = false;
}
}, err => {
this.morePagesAvailable = false;
})
}
/*logOut(){
this.authenticationService.logOut()
.then(
res => this.navCtrl.push(LoginPage),
err => console.log('Error in log out')
)
}
goToLogin(){
this.navCtrl.push(LoginPage);
}*/
}
home.html的
<ion-list *ngFor="let post of posts" (click)="postTapped($event, post)" class="cardList">
<ion-card-content class="innerContent">
<ion-grid>
<ion-row class="entityParams">
<ion-col class="img" col-2><img id="roundpic" src="{{post.images.medium}}" class="thumbs" />
</ion-col>
<ion-col col-10 class="ParamsInner">
<ion-row class="entity">{{post.custom_fields.entity}} </ion-row>
<ion-row class="method"><ion-icon name="clipboard"></ion-icon> {{post.custom_fields.method}}</ion-row>
</ion-col>
</ion-row>
<ion-row class="ptb">
<span [innerHTML]="post.title.rendered" class="postTitle"></span>
</ion-row>
<ion-row class="cardbottom">
<ion-col col-8 class="ref_number dotted-spaced-ref"> <ion-icon name="radio-button-on"></ion-icon> {{post.custom_fields.ref_number}} </ion-col>
<ion-col col-4 class="deadline dotted-spaced-dline"><ion-icon name="calendar"></ion-icon> Ending:<br />{{post.custom_fields.deadline}}</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-list>
配置file.ts
//config constants
export const WORDPRESS_URL = 'http://www.example.com/wp/';
export const WORDPRESS_REST_API_URL = WORDPRESS_URL + 'wp-json/wp/v2/';
我尝试将下面的代码放在我的 works.ts 文件中,但是它会显示所有最近的帖子而不是特定类别的帖子(作品)
import { Component } from '@angular/core';
import { PostPage } from '../post/post';
import { IonicPage, NavController, LoadingController, NavParams } from 'ionic-angular';
import { WordpressService } from '../../services/wordpress.service';
import { AuthenticationService } from '../../services/authentication.service';
/**
* Generated class for the WorksPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-works',
templateUrl: 'works.html',
})
export class WorksPage {
posts: Array<any> = new Array<any>();
morePagesAvailable: boolean = true;
loggedUser: boolean = false;
categoryId: number;
categoryTitle: string;
constructor(
public navCtrl: NavController,
public navParams: NavParams,
public loadingCtrl: LoadingController,
public wordpressService: WordpressService,
public authenticationService: AuthenticationService
) {}
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad WorksPage');
//if we are browsing a category
this.categoryId = this.navParams.get(1);
this.categoryTitle = this.navParams.get('title');
if(!(this.posts.length > 0)){
let loading = this.loadingCtrl.create();
loading.present();
this.wordpressService.getRecentPosts(this.categoryId)
.subscribe(data => {
for(let post of data){
post.excerpt.rendered = post.excerpt.rendered.split('<a')[0] + "</p>";
this.posts.push(post);
}
loading.dismiss();
});
}
}
postTapped(event, post) {
this.navCtrl.push(PostPage, {
item: post
});
}
doInfinite(infiniteScroll) {
let page = (Math.ceil(this.posts.length/10)) + 1;
let loading = true;
this.wordpressService.getRecentPosts(this.categoryId, page)
.subscribe(data => {
for(let post of data){
if(!loading){
infiniteScroll.complete();
}
post.excerpt.rendered = post.excerpt.rendered.split('<a')[0] + "</p>";
this.posts.push(post);
loading = false;
}
}, err => {
this.morePagesAvailable = false;
})
}
}
添加了修改 此代码用于 services.ts 文件
import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import * as Config from '../config';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/forkJoin';
@Injectable()
export class WordpressService {
constructor(public http: Http){}
getRecentPosts(categoryId:number, page:number = 1){
//if we want to query posts by category
let category_url = categoryId? ("&categories=" + categoryId): "";
return this.http.get(
Config.WORDPRESS_REST_API_URL
+ 'posts?page=' + page
+ category_url)
.map(res => res.json());
}
getComments(postId:number, page:number = 1){
return this.http.get(
Config.WORDPRESS_REST_API_URL
+ "comments?post=" + postId
+ '&page=' + page)
.map(res => res.json());
}
getAuthor(author){
return this.http.get(Config.WORDPRESS_REST_API_URL + "users/" + author)
.map(res => res.json());
}
getPostCategories(post){
let observableBatch = [];
post.categories.forEach(category => {
observableBatch.push(this.getCategory(category));
});
return Observable.forkJoin(observableBatch);
}
getCategory(category){
return this.http.get(Config.WORDPRESS_REST_API_URL + "categories/" + category)
.map(res => res.json());
}
createComment(postId, user, comment){
let header: Headers = new Headers();
header.append('Authorization', 'Bearer ' + user.token);
return this.http.post(Config.WORDPRESS_REST_API_URL + "comments?token=" + user.token, {
author_name: user.displayname,
author_email: user.email,
post: postId,
content: comment
},{ headers: header })
.map(res => res.json());
}
}
答案 0 :(得分:0)
如果您查看WordPress rest api documentation,则表示您可以向请求发送categories
参数:
所以网址会是这样的:
https://www.example.com/wp-json/wp/w2/posts?categories=1
如果Works类别具有term_id 1
,则应仅返回该类别中的所有帖子