Соединение Angular и WordPress API с помощью wp-api-angular

 // ... export class PostListComponent implements OnInit { @Input() token; posts = []; } 

Код конструктора, который должен вызывать метод getPosts :

 // ... constructor(private wpApiPosts: WpApiPosts) { this.getPosts(); } 

Нам не нужно проверять подлинность для получения сообщений, поэтому давайте использовать тот же подход, что и раньше:

 // ... getPosts() { this.wpApiPosts.getList() .toPromise() .then( response => { let json: any = response.json(); this.posts = json; }); } 

Теперь визуализируем массив сообщений:

 <!-- src/app/post-list/post-list.component.html --> <div> <h2>Latests Posts:</h2> <hr> <div *ngFor='let post of posts'> <h1 [innerHTML]='post.title.rendered'></h1> <p [innerHTML]='post.content.rendered'></p> <hr> </div> </div> 

Наконец, отобразите компонент:

 <!-- app.component.html --> <!-- ... --> <div> <post-list [token]='token'></post-list> </div> 

Уничтожение постов

Далее я бы хотел добавить возможность уничтожать посты. Эта функция может быть реализована в том же компоненте PostList . Просто добавьте кнопку Удалить рядом с каждым сообщением:

 <!-- src/app/post-list/post-list.component.html --> <div> <h2>Latests Posts:</h2> <hr> <div *ngFor='let post of posts'> <h1 [innerHTML]='post.title.rendered'></h1> <p [innerHTML]='post.content.rendered'></p> <button *ngIf='token' (click)='deletePost(post.id, $index)'>Delete</button> <hr> </div> </div> 

Обратите внимание, что эта кнопка отображается только при наличии токена. Также deletePost компонент, добавив метод deletePost :

 // src/app/post-list/post-list.component.ts // ... deletePost(id: number, index: number) { let headers: Headers = new Headers({ 'Authorization': 'Bearer ' + this.token }); this.wpApiPosts.delete(id, { headers: headers }) .toPromise() .then( response => { if (response['ok'] == true) { this.posts.splice(index,1); } }) } 

В принципе, ничего нового здесь. Мы добавляем токен в заголовки и вызываем метод delete который принимает идентификатор сообщения и его индекс в массиве posts . Если запрос выполнен успешно, удалите сообщение из массива.

Редактирование сообщений

Последняя функция, которую мы собираемся представить сегодня, — это возможность редактировать сообщения. Давайте создадим новый компонент:

 ng generate component post-edit 

На этот компонент будут ссылаться из PostList . В частности, я хотел бы добавить кнопку « Редактировать» рядом с каждым сообщением и отображать шаблон PostEdit при каждом нажатии:

 <!-- src/app/post-list/post-list.component.html --> <div> <h2>Latests Posts:</h2> <hr> <div *ngFor='let post of posts'> <div *ngIf='editingPost != post; else postEdit'> <h1 [innerHTML]='post.title.rendered'></h1> <p [innerHTML]='post.content.rendered'></p> <button *ngIf='token' (click)='deletePost(post.id, $index)'>Delete</button> <button *ngIf='token' (click)='updatePost(post)'>Edit</button> <hr> </div> </div> <ng-template #postEdit> <post-edit [post]='editingPost' [token]='token' (finish)='editingPost = null; getPosts()'></post-edit> </ng-template> 

PostListComponent , введя переменную updatePost метод updatePost , который собирается назначить editingPost с правильным значением:

 // src/app/post-list/post-list.component.ts // ... export class PostListComponent implements OnInit { @Input() token; posts = []; editingPost = null; updatePost(post) { this.editingPost = post; } } 

Перейдите к PostEditComponent и импортируйте все необходимые модули:

 // src/app/post-edit/post-edit.component.ts import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core'; import { WpApiPosts } from 'wp-api-angular'; import { Headers } from '@angular/http'; // ... 

Этот компонент будет иметь два входа: токен и фактическое сообщение для редактирования. Также у нас будет вывод ( EventEmitter ):

 // ... export class PostEditComponent implements OnInit { @Input() token; @Input() post; @Output() finish = new EventEmitter<void>(); post_edit = { title: '', content: '' } } 

Как только компонент будет инициализирован, присвойте переменную post_edit с правильным заголовком и содержимым, взятым из переменной post :

 // ... ngOnInit() { this.post_edit['title'] = this.post.title.rendered; this.post_edit['content'] = this.post.content.rendered; } 

Теперь updatePost метод updatePost , который будет выполнять аутентификацию. Обновите сообщение и отправьте событие:

 // ... updatePost() { let headers: Headers = new Headers({ 'Authorization': 'Bearer ' + this.token }); this.wpApiPosts.update(this.post.id, this.post_edit, { headers: headers }) .toPromise() .then( response => { this.finish.emit(null); }) } 

Обратите внимание, что метод update принимает как идентификатор сообщения, так и новое значение для заголовка и содержимого.

Вот форма для редактирования поста:

 <!-- src/app/post-edit/post-edit.component.html --> <div> <h2> Post Editing </h2> <form (ngSubmit)='updatePost()'> <div class="form-group"> <label for="title">Post title</label> <input type="text" class="form-control" [(ngModel)]='post_edit.title' name='title' id="title" required> </div> <div class="form-group"> <label for="content">Post content</label> <textarea class="form-cont rol" id="content" required [(ngModel)]='post_edit.content' name='content'></textarea> </div> <button type="submit" class="btn btn-success">Submit</button> </form> </div> 

Вот и все: функция редактирования готова! Теперь вы можете загрузить сервер, выполнив:

 ng serve --open 

и поиграйте с приложением, чтобы убедиться, что все работает нормально.

Вывод

В этой статье мы обсудили использование клиента WordPress API для Angular. Мы увидели это в действии, представив функцию аутентификации, перечислив пользователей и сообщения, а также добавив возможность создавать и манипулировать сообщениями. Этот клиент позволяет вам работать с другими ресурсами, такими как медиа и комментарии, но все эти взаимодействия очень похожи на те, о которых мы говорили здесь.

Надеюсь, теперь вы готовы применить представленную здесь информацию на практике, но не стесняйтесь, присылайте мне свои вопросы! Как всегда, спасибо, что остаетесь со мной и до следующего раза.