本教程使用 wp-api angular 库将Angular 2应用程序与WordPress REST API连接。 该图书馆支持主要的WP资源（用户，帖子，评论，媒体，分类法）。我们将构建展示其易用性的功能：JWT身份验证，用户和发布列表，以及Post Crud（创建，读取，更新，删除）操作。 完整的源代码在GitHub上。 虽然本教程使用Angular 5，但这些概念适用于Angular 2。

使用

。 角度实现：JWT身份验证，用户列表和邮政处理。

• 访问完整的WordPress API（用户，帖子，注释，媒体）以增强角度应用程序。 [2 本教程使用一个自托管的WordPress实例。 启用永久链接（有关指令，请参见WordPress codex; nginx，添加
）。 安装JWT身份验证插件以进行安全API访问。
• [2
• 创建一个新的Angular应用程序：
NG NEW WP-API
安装库：
• CD WP-API && NPM安装WP-API-ANGULAR--SAVE- -SAVE
[2

}）） ]，， // ... }）） 导出函数wpapiloaderfactory（http：http）{ 返回新的Wpapistaticloader（http，'http：// your_domain_here/wp-json/wp/v2/'，''）; }

app.component.ts （包括， httpclientmodule ）。 [2

添加一个变量添加到 app.component.ts

创建一个
1. authentication ng生成组件authentication ）。
authentication.component.ts
2. ，创建一个和 auth（）
3. [2 this.http.post（'http：// your_domain/wp-json/jwt-auth/v1/token'，{ 用户名：this.user.login， 密码：this.user.password }）。订阅（data => { if（data ['token']）{ this.token = data ['token']; this.tokenchange.emit（this.token）; } }）; }

import { Http } from '@angular/http';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { WpApiModule, WpApiLoader, WpApiStaticLoader } from 'wp-api-angular';

@NgModule({
  // ...
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    WpApiModule.forRoot({
      provide: WpApiLoader,
      useFactory: WpApiLoaderFactory,
      deps: [Http]
    })
  ],
  // ...
})

export function WpApiLoaderFactory(http: Http) {
  return new WpApiStaticLoader(http, 'http://YOUR_DOMAIN_HERE/wp-json/wp/v2/', '');
}

创建一个 user-list ng生成component user-list ）。 In user-list.component.ts, inject WpApiUsers and use getList()

[2

创建一个
1. post-new 列表帖子：创建一个 post-list
component。使用
2. wpapiposts.getlist（）来获取帖子。 删除帖子：将删除按钮添加到 post-list
。使用JWT授权标题。
3. 创建一个 post-edit 结论：

本教程为将Angular与WordPress REST API集成为基础。   wp-api angular 库简化了此过程，从而可以在角度应用程序中有效地管理WordPress内容。  记住要安全地处理身份验证并有效地管理异步操作。  提供的代码片段和解释应帮助您与WordPress API建立更复杂的交互。