Angular

Question

我正在开发一个 Angular 应用程序（类似于 Stack Overflow 的工作方式），它显示来自 Wordpress REST API 的帖子（或问题，如果你愿意的话）和其他相关数据。我想要完成的是在 URL 中有一个运行数字，例如http://localhost:4200/frontpage/:pagenumber 并反映网站上的内容。我已经成功创建了一个应用程序，用户可以在其中单击分页控制按钮在页面之间导航（而运行始终使用相同的组件），但是 网页上的内容不会更新 那个，这就是我需要解决的问题。因此，假设用户导航到 http://localhost:4200/frontpage/2，应用程序应该触发一个函数调用，向 Wordpress REST API: /wp/v2/posts?page=2&per_page=3 发送一个 GET 请求，结果数据应该反映在那个动作。

我也遇到了 API 返回的页数 header X-WP-TotalPages 给我的页数 低于实际页数的问题 的网站。 My Wordpress site 有 6 个 public 个帖子，但 X-WP-TotalPages returns 将结果集限制为 3 个帖子 per_page 时的值为 1。给出了什么？

你会在这里找到我的 Stackblitz：https://stackblitz.com/edit/angular-ivy-wqptx4?file=src/app/frontpage/frontpage.component.ts

以下是重要部分：

app-routing.module.ts:

const routes: Routes = [
  { path: 'frontpage/:page', component: FrontpageComponent },
  { path: '', redirectTo: '/frontpage/1', pathMatch: 'full' },
];

question.service.ts:

/** GET all questions */
getQuestions(page: number): Observable<Question[]> {
  return this.http.get<Question[]>(
    `https://public-api.wordpress.com/wp/v2/sites/aleksejjj83211792.wordpress.com/posts?page=${page}&per_page=3`
  );
}

/** GET headers from response with the 'observe' option */
getHeaders(): Observable<HttpResponse<Question[]>> {
  return this.http.get<Question[]>(
      'https://public-api.wordpress.com/wp/v2/sites/aleksejjj83211792.wordpress.com/posts', { observe: 'response' }
  );
}

frontpage.component.html:

<!-- A row of pagination control buttons -->
<nav aria-label="Page navigation example">
    <ul class="pagination">
        <li *ngFor="let page of [].constructor(pageCount); let i = index" class="page-item">
            <a routerLink="/frontpage/{{ i + 1 }}" class="page-link" href="#">{{ i + 1 }}</a>
        </li>
    </ul>
</nav>

frontpage.component.ts:

export class FrontpageComponent implements OnInit {

    constructor(
        private questionService: QuestionService,
        private router: Router,
        private route: ActivatedRoute
      ) {
        router.events
          .pipe(filter((event) => event instanceof NavigationEnd))
          .subscribe((event: NavigationEnd) => {
            const splitURL = event.url.split('/');
            console.log('navigated to ', event.url);
            this.getQuestions(+splitURL[2]);
          });
      }

    getQuestionCount(): void {
        this.questionService.getHeaders().subscribe((questions) => {
        this.pageCount = +questions.headers.get('X-WP-TotalPages');
        console.log('pageCount', this.pageCount);
    });

    ngOnInit(): void {
        this.getQuestionCount();
        const pageParam = +this.route.snapshot.paramMap.get('page');
        this.mergedArray$ = this.getQuestions(pageParam);
    }
}

我意识到，如果我手动转到浏览器的地址栏，输入页码并按回车键，网站上的内容实际上会根据页码更新, 但按下页面底部的分页控制按钮没有任何反应，所以我需要解决这个问题。

Answer 1

QuestionService中的getHeaders有一个小错误。当您在没有参数的情况下调用 /posts 时，您希望每页有多少项目，wordpress 将应用默认的 pageSize - 并使用该默认值来计算总页数。

如此轻松地将 pageSize 添加到调用中就可以了。

改成这样：

getHeaders(): Observable<HttpResponse<Question[]>> {
return this.http.get<Question[]>(
  'https://public-api.wordpress.com/wp/v2/sites/aleksejjj83211792.wordpress.com/posts?per_page=3',
  { observe: 'response' }
);

}

Angular - 如何使用 Wordpress REST 创建分页 API？

Angular - How to create pagination with Wordpress REST API?

wordpress-rest-api