從 Angular 中的另一個組件調用模態對話框的正確方法？

Question

我有一個名為部門的組件，我在其中使用模式對話框創建一個部門，如下所示：

部門.組件

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

create() {
    //code omitted for simplicity
}

員工組件

createDepartment() {
    //???
}

另一方面，我有另一個名為employee 的組件，我需要通過調用打開的對話框來創建一個departmet，並在department 組件中創建方法。

從員工組件創建部門的正確方法是什么？ 我是否也應該在員工組件中實現openModal()和create()方法？ 或者我應該調用部門組件中已經定義的方法？ 我認為最好使用已經存在的方法和組件以避免重復。

這種情況的任何示例方法？

Answer 1

從組件中提取此數據邏輯並將其移至單獨的服務。

// 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)
  }
}

編輯：
有了更多信息，特定表單（用於創建部門）將顯示在應用程序的多個位置（在模式和員工組件中）。

為此，創建一個包含表單（帶有創建按鈕等）和所需事件處理程序（例如創建部門按鈕）的組件，並在需要的地方顯示（創建部門的實際邏輯應該在單獨的服務中）。

例如在員工 html

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

模態應該是這樣的（組件可能必須在 EntryComponents 中，具體取決於 angular 版本）：

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

（MatDialog 的文檔： https://material.angular.io/components/dialog/overview ）

Answer 2

<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>

---

導出 class CampaignConfigurableProductsComponent 實現 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)
    })
}



}