javascript - Korrekt sätt att kalla på modaldialog från en annan komponent i Angular?

Jag har en komponent som kallas avdelning där jag skapar en avdelning med en modal dialog som visas nedan:

avdelning.komponent :

openModal(data) {
    //code omitted for simplicity
    this.modalService.showMOdal();
    this.create();
}

create() {
    //code omitted for simplicity
}

employee.component :

createDepartment() {
    //???
}

Å andra sidan har jag en annan komponent som kallas anställd och jag behöver skapa en avdelning genom att kalla på öppna dialogen och skapa metoder i avdelningskomponenten.

Vad är det rätta sättet att skapa en avdelning från anställdkomponenten? Bör jag implementera openModal() och create() metoder i anställdkomponenten också? Eller bör jag kalla på de metoder som redan är definierade i avdelningskomponenten? Jag tror att det vore bättre att använda redan existerande metoder och komponenter för att undvika upprepning.

Finns det något exempel på tillvägagångssätt för detta scenario?

Svar #1

<button type="button" (click)="addCampaignProduct()" mat-raised-button color="primary"
[title]="'ADD_CAMPAIGN_PRODUCT' | translate:lang">
<i class="material-icons">add_circle</i>{{ 'ADD_CAMPAIGN_PRODUCT' | translate:lang }}
</button>

export class CampaignConfigurableProductsComponent implementerar OnInit, AfterViewInit { }

    addCampaignProduct() {
        const dialogRef = this.dialog.open(AddConfigurableProductComponent, {
            disableClose: true,
            data: { campaignId: this.params.id }
        })
        dialogRef.afterClosed().subscribe(() => {
          this.ngOnInit()
        });
    }

export class AddConfigurableProductComponent implements OnInit { 


 addProduct() {
    const selectedOrderIds = this.addProductForm.value.colors
      .map((checked, i) => checked ? this.colorAttributeData[i].config_product_option_value : null)
      .filter(v => v !== null);

    if (this.addProductForm.value.actual_price == '') {
      this.sales_price = this.addProductObj.recommended_price;
    } else {
      this.sales_price = this.addProductForm.value.actual_price;
    }
    this.addProductObj['sales_price'] = this.sales_price;
    this.addProductObj['actual_price'] = this.finalPriceValue;
    this.addProductObj['campaign_id'] = this.data.campaignId;

this.campaignService.addProductCatalog(this.addProductObj).subscribe((response: any) => {
      if (response) { 

      }
  }, (error) => {
      this.notify.error('Something went wrong')
      console.log(error)
    })
}



}

Svar #2

Extrahera denna datalogik från komponenterna och flytta den till en separat tjänst.

// Move functions for opening the modal from DepartmentComponent to a service
@Injectable({providedIn: 'root'})
export class DepartmentService {
  constructor(private modalService: ModalService){}

  openModal(data) {...}

  create() {...}
}

// Inject the service into EmployeeComponent
export class EmployeeComponent {
  constructur(private departmentService: DepartmentService){}

  createDepartment() {
    this.departmentService.openModal()/create();  // whichever you actually need to call (should probably only be one that delegates to other functions)
  }
}

REDIGERA:
Med lite mer information är ett specifikt formulär (för att skapa en avdelning) avsett att visas på mer än ett ställe i appen (i en modal och en anställd-komponent).

För detta, skapa en komponent som innehåller formuläret (med skapa-knapp etc.) och de nödvändiga händelsehanterarna (t.ex. skapa avdelningsknapp) och visa det där det behövs (den faktiska logiken för att skapa avdelningen bör finnas i en separat tjänst).

Till exempel i medarbetarens html

... employee information ...
<app-createdepartment></app-createdepartment>

Och modalen bör vara något i stil med detta (komponenten kan behöva vara i EntryComponents, beroende på Angular-version):

let dialogRef = dialog.open(CreateDepartmentComponent, {
  height: '400px',
  width: '600px',
});

(Dokumentation för MatDialog: https://material.angular.io/components/dialog/overview)