JS, многоцелевая функция

это приложение Angular, на этой странице будет список и подсписок с действием для каждого из них (добавить / изменить / удалить)

кнопки (добавить / изменить) отобразят всплывающее окно с той же формой, за исключением того, что ориентир покажет еще одно поле.

<ng-template #modaleTemplate>
  <div class="modal-header">
    <h4 class="modal-title pull-left">Modal</h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body text-center">
    <div class="d-flex justify-content-center">
      <div class="w-50">
        <input
        class="form-control shadow-sm bg-white rounded"
        [(ngModel)]="areaModel.name"
        placeholder="{{ 'Name' | translate }}"
      />
      </div>
      <div class="w-50" *ngIf="showTypes">
        <select-menu
        [label]="'landmarkType'"
        [itemKey]="'Id'"
        [dropDownListInputs]="landmarkTypeList"
        (SearchVAlue)="getLandmarkType($event)"
        (selectedListChange)="onLandmarTypekDDLChanged($event)"
        [options]="selectMenuOptions"
      ></select-menu>
      </div>
    </div>




    <div class="pt-5">
      <tabset>
        <tab heading="Location" class="py-3" id="tab1">
          <input
            class="w-100 d-inline-block form-control shadow-sm bg-white rounded"
            [(ngModel)]="areaModel.location"
            placeholder="{{ 'Name' | translate }}"
          />
        </tab>
        <tab heading="MoreDetails" class="py-3">
          <div class="row">
            <div class="col-12">
              <div class="form-group">
                <label for="description">{{"Description" | translate}}</label>
                <input type="text" class="form-control shadow-sm bg-white rounded" [(ngModel)]="areaModel.description" placeholder="{{ 'Description' | translate }}" id="description">
              </div>
            </div>
            <div class="col-6">
              <div class="form-group">
                <label for="telephone1">{{"Telephone #1" | translate}}</label>
                <input type="text" class="form-control shadow-sm bg-white rounded" [(ngModel)]="areaModel.telephone1" placeholder="{{ 'Telephone #1' | translate }}" id="telephone1">
              </div>
            </div>
            <div class="col-6">
              <div class="form-group">
                <label for="telephone2">{{"Telephone #2" | translate}}</label>
                <input type="text" class="form-control shadow-sm bg-white rounded" [(ngModel)]="areaModel.telephone2" placeholder="{{ 'Telephone #2' | translate }}" id="telephone2">
              </div>
            </div>
            <div class="col-6">
              <div class="form-group">
                <label for="Mobile">{{"Mobile" | translate}}</label>
                <input type="text" class="form-control shadow-sm bg-white rounded" [(ngModel)]="areaModel.mobile" placeholder="{{ 'Mobile' | translate }}" id="Mobile">
              </div>
            </div>
            <div class="col-6">
              <div class="form-group">
                <label for="Fax">{{"Fax" | translate}}</label>
                <input type="text" class="form-control shadow-sm bg-white rounded" [(ngModel)]="areaModel.fax" placeholder="{{ 'Fax' | translate }}" id="Fax">
              </div>
            </div>
            <div class="col-6">
              <div class="form-group">
                <label for="Website">{{"Website" | translate}}</label>
                <input type="text" class="form-control shadow-sm bg-white rounded" [(ngModel)]="areaModel.website" placeholder="{{ 'Website' | translate }}" id="Website">
              </div>
            </div>
            <div class="col-6">
              <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" [(ngModel)]="areaModel.isLive" id="isLive">
                <label class="custom-control-label" for="isLive">{{ "IsLive" | translate }}</label>
              </div>
            </div>
          </div>
        </tab>
      </tabset>
    </div>
  </div>
  <div class="d-flex p-3 justify-content-end">
    <button type="button" class="btn btn-link" (click)="modalRef.hide()">cancel</button>
    <button type="button" class="btn btn-primary" (click)="save()">save</button>
  </div>
</ng-template>


<div class="branch-management container-fluid">
  <div class="row">
    <div class="col-12">
      <span class="actions d-flex justify-content-end mb-3">
        <a class="add-btn" (click)="showModal(modaleTemplate, {name: 'area', action: 'add'})">
          <i class="fas fa-plus"></i>
          addArea
        </a>
      </span>

      <div class="level-areas" id="areas">
        <div class="item d-flex justify-content-between align-items-center">

          <div class="btn btn-link collapsed"
            data-toggle="collapse"
            data-target="#area-1">
            <div class="btn btn-link icon">
              <i class="fas fa-plus"></i>
              <i class="fas fa-minus"></i>
            </div>
            Area title
          </div>
          <span class="actions">
            <a class="add-btn" (click)="showModal(modaleTemplate, {name: 'city', action: 'add', id: 1})">
              <i class="fas fa-plus"></i>
              addCity
            </a>
            <a class="edit-btn" (click)="showModal(modaleTemplate, {name: 'area', action: 'edit', id: 1})">
              <i class="fas fa-pen"></i>
              edit
            </a>
            <a class="delete-btn" (click)="delete({name: 'area', id: 1})">
              <i class="fas fa-trash-alt"></i>
              delete
            </a>
          </span>
        </div>


        <div id="area-1" class="collapse" data-parent="#areas">
          <div class="level-cities" id="cities">

            <div class="item d-flex justify-content-between align-items-center">

              <div class="btn btn-link collapsed"
                data-toggle="collapse"
                data-target="#city-2">
                <div class="btn btn-link icon">
                  <i class="fas fa-plus"></i>
                  <i class="fas fa-minus"></i>
                </div>
                City title
              </div>
              <span class="actions">
                <a class="add-btn" (click)="showModal(modaleTemplate, {name: 'landmark', action: 'add', id: 1})">
                  <i class="fas fa-plus"></i>
                  addLandmark
                </a>
                <a class="edit-btn" (click)="showModal(modaleTemplate, {name: 'city', action: 'edit', id: 1})">
                  <i class="fas fa-pen"></i>
                  edit
                </a>
                <a class="delete-btn" (click)="delete({name: 'city', id: 1})">
                  <i class="fas fa-trash-alt"></i>
                  delete
                </a>
              </span>
            </div>
            <div id="city-2" class="collapse" data-parent="#cities">
              <div class="level-landmarks">
                <ul>
                  <li class="item d-flex justify-content-between align-items-center">
                    landmark name
                    <span class="actions">

                      <a class="edit-btn" (click)="showModal(modaleTemplate, {name: 'landmark', action: 'edit', id: 1})">
                        <i class="fas fa-pen"></i>
                        edit
                      </a>
                      <a class="delete-btn" (click)="delete({name: 'landmark', id: 1})">
                        <i class="fas fa-trash-alt"></i>
                        delete
                      </a>
                    </span>
                  </li>
                </ul>

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

</div>
</div>

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

Кроме того, на кнопке модального сохранения запускается метод save (), который будет выполнять метод в зависимости от того, что было передано в модальную функцию show.

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

modalRef: BsModalRef;
showTypes = false;
areaModel: AreaModel = new AreaModel();
  action = {
    action: string,
    name: string,
    id: string
  };
  showModal(template: TemplateRef<any>, props: any) {
    console.log(props);
    this.action = props;
    if(props.action === "edit") {
      switch (props.name) {
        case 'area':
          console.log(props.action, props.name);
          this.cpService.getAreaById(props.id).subscribe(res => this.areaModel = res.Value);
          break;
        case 'city':
          console.log(props.action, props.name);
          this.cpService.getCityById(props.id).subscribe(res => this.areaModel = res.Value);
          break;
        case 'landmark':
          console.log(props.action, props.name);
          this.cpService.getLandmarkById(props.id).subscribe(res => this.areaModel = res.Value);
          break;
      }
    }

    if(props.name === "landmark") {
      this.showTypes = true;
    } else {
      this.showTypes = false;
    }

    this.modalRef = this.modalService.show(
      template,
      Object.assign({}, { class: 'modal-lg' })
    );
  }



  delete(name, id) {

    switch (name) {
      case 'area':
        this.cpService.deleteArea(id).subscribe(res => console.log(res))
        break;
      case 'city':
        this.cpService.deleteCity(id).subscribe(res => console.log(res))
        break;
      case 'landmark':
        this.cpService.deleteLandmark(id).subscribe(res => console.log(res))
        break;
    }
  }


  save() {
    const currentAction = this.action.action as any;
    switch (this.action.name as any) {
      case 'area':
        if (currentAction === 'edit') {
          this.cpService.editArea(this.areaModel).subscribe(res => console.log(res));
        } else {
          this.cpService.addArea(this.areaModel).subscribe(res => console.log(res));
        }
        break;
      case 'city':
        if (currentAction === 'edit') {
          this.cpService.editCity(this.areaModel).subscribe(res => console.log(res));
        } else {
          this.cpService.addCity(this.areaModel).subscribe(res => console.log(res));
        }
        break;
      case 'landmark':
        if (currentAction === 'edit') {
          this.cpService.editLandmark(this.areaModel).subscribe(res => console.log(res));
        } else {
          this.cpService.addLandmark(this.areaModel).subscribe(res => console.log(res));
        }
        break;
    }
  }

Это хорошая практика или есть еще один хороший вариант?