Question

嗨，我是Angular 4中的新手，我想用它来使用wp-api构建一个WordPress主题。我从ng-wp-theme开始，但我及其所有工作正常，但我需要一个新帖子发布帖子列表页面更新本身而不重新加载页面。我看到一些关于http服务的教程有角度但是我没有找到任何解决方案，也许它是一个Wordpress api问题而不是Angular部分。

这是服务：

import { Injectable } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { Observable } from 'rxjs/Observable';
import { Post } from './post';
import { environment } from '../../environments/environment';

@Injectable()
export class PostsService {

  private _wpBase = environment.wpBase;

  constructor(private http: HttpClient) { }

  getPosts(): Observable<Post[]> {
      return this.http.get<Post[]>(this._wpBase + 'posts');
  }

  getPost(slug: string): Observable<Post[]> {
      return this.http.get<Post[]>(this._wpBase + `posts?slug=${slug}`);
  }
}

和控制器：

import { Component, OnInit } from '@angular/core';
import { Post } from '../post';
import { PostsService } from '../posts.service';
import { Router } from '@angular/router';
import { HttpErrorResponse } from '@angular/common/http';

@Component({
  selector: 'app-post-list',
  templateUrl: './post-list.component.html',
  styleUrls: ['./post-list.component.css'],
  providers: [PostsService]
})

export class PostListComponent implements OnInit {

  public posts: Post[];

  constructor( private postsService: PostsService, private router: Router ) {}

  ngOnInit() {

    this.postsService.getPosts().subscribe(
      (posts: Post[]) => this.posts = posts,
      (err: HttpErrorResponse) => err.error instanceof Error ? console.log('An error occurred:', err.error.message) : console.log(`Backend returned code ${err.status}, body was: ${err.error}`));

  }
  selectPost(slug) {
    this.router.navigate([slug]);
  }
}

当新帖发布时，wordpress和angular theme会更新帖子列表

0 个答案: