Angular - Работа с DELETE запросами

Структура и маршрутизация папок

Выполните команду Angular CLI, которая создаст необходимую структуру папок. Более того, он собирается импортировать компонент OwnerDelete внутри файла owner.module.ts:

ng g component owner/owner-delete --skipTests

Кроме того, мы должны изменить файл owner.module.ts, чтобы включить маршрутизацию для этого компонента:

RouterModule.forChild([
      { path: 'list', component: OwnerListComponent },
      { path: 'details/:id', component: OwnerDetailsComponent },
      { path: 'create', component: OwnerCreateComponent },
      { path: 'update/:id', component: OwnerUpdateComponent},
      { path: 'delete/:id', component: OwnerDeleteComponent }
    ])
  ]

Кроме того, давайте изменим файлы owner-list.component.html и owner-list.component.ts, чтобы включить навигацию на страницу удаления:

<button type="button" id="delete" class="btn btn-danger" (click)="redirectToDeletePage(owner.id)">Delete</button>

public redirectToDeletePage = (id) => { 
  const deleteUrl: string = `/owner/delete/${id}`; 
  this.router.navigate([deleteUrl]); 
}

Обработка угловых действий удаления в HTML-файле

Чтобы создать HTML-часть компонента, начнем с кода оболочки:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-10 card card-body bg-light mb-2 mt-2">

    </div>
  </div>
  <br>
</div>

Внутри div с классом col-md-10 мы собираемся показать все детали сущности, которую хотим удалить:

<div class="row">
  <div class="col-md-3">
    <label for="name" class="control-label">Owners name:</label>
  </div>
  <div class="col-md-7">
    <span name="name">
      {{owner?.name}}
    </span>
  </div>
</div>

<div class="row">
  <div class="col-md-3">
    <label for="dateOfBirth" class="control-label">Date of birth:</label>
  </div>
  <div class="col-md-7">
    <span name="dateOfBirth">
     {{owner?.dateOfBirth | date: 'MM/dd/yyyy'}}
    </span>
  </div>
</div>

<div class="row">
  <div class="col-md-3">
    <label for="address" class="control-label">Address:</label>
  </div>
  <div class="col-md-7">
    <span name="address">
      {{owner?.address}}
    </span>
  </div>
</div>

Прямо под тегом <br/> добавим кнопки:

<div class="row">
  <div class="col-md-offset-8 col-md-1">
    <button type="submit" class="btn btn-info" (click)="deleteOwner()">Delete</button>
  </div>
  <div class="col-md-1">
    <button type="button" class="btn btn-danger" (click)="redirectToOwnerList()">Cancel</button>
  </div>
</div>

Наконец, мы собираемся добавить наши пользовательские модальные компоненты:

<app-success-modal [modalHeaderText]="'Success message'" 
  [modalBodyText]="'Action completed successfully'" 
  [okButtonText]="'OK'"
  (redirectOnOK)="redirectToOwnerList()"></app-success-modal>

<app-error-modal [modalHeaderText]="'Error message'" 
  [modalBodyText]="errorMessage" 
  [okButtonText]="'OK'"></app-error-modal>

Наша HTML-часть компонента готова. Все, что нам нужно сделать, это реализовать бизнес-логику.

Обработка действий удаления Angular в файле компонента

Измените файл owner-delete.copmonent.ts, импортировав все необходимые ресурсы и добавив сервисы в конструктор:

import { Component, OnInit } from '@angular/core';
import { ErrorHandlerService } from './../../shared/services/error-handler.service';
import { RepositoryService } from './../../shared/services/repository.service';
import { Owner } from './../../_interfaces/owner.model';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-owner-delete',
  templateUrl: './owner-delete.component.html',
  styleUrls: ['./owner-delete.component.css']
})
export class OwnerDeleteComponent implements OnInit {
  public errorMessage: string = '';
  public owner: Owner;

constructor(private repository: RepositoryService, private errorHandler: ErrorHandlerService, private router: Router,
  private activeRoute: ActivatedRoute) { }

}

Ниже конструктора мы собираемся добавить логику для получения владельца и перенаправления на компонент списка владельцев:

ngOnInit() {
  this.getOwnerById();
}

private getOwnerById = () => {
  const ownerId: string = this.activeRoute.snapshot.params['id'];
  const ownerByIdUrl: string = `api/owner/${ownerId}`;

  this.repository.getData(ownerByIdUrl)
    .subscribe(res => {
      this.owner = res as Owner;
    },
    (error) => {
      this.errorHandler.handleError(error);
      this.errorMessage = this.errorHandler.errorMessage;
    })
}

public redirectToOwnerList = () => {
  this.router.navigate(['/owner/list']);
}

Наконец, давайте реализуем логику удаления прямо под функцией redirectToOwnerList:

public deleteOwner = () => {
  const deleteUrl: string = `api/owner/${this.owner.id}`;
  this.repository.delete(deleteUrl)
    .subscribe(res => {
      $('#successModal').modal();
    },
    (error) => {
      this.errorHandler.handleError(error);
      this.errorMessage = this.errorHandler.errorMessage;
    })
}

Вот и все. Мы закончили нашу Angular часть этого приложения. В результате у нас есть полнофункциональное приложение, готовое к развертыванию. Поэтому все, что нам осталось сделать, - это подготовить файлы Angular для производства и развернуть готовое приложение в среде Windows и Linux.

Заключение

Прочитав этот пост, вы узнали:

• Как создать HTML-часть действия удаления
• Как отправить запрос DELETE на сервер

Спасибо, что прочитали этот пост, надеюсь, он был вам полезен.