javascript - 从 Angular 中的另一个组件调用模式对话框的正确方法？

Question

我有一个名为“部门”的组件，我在其中使用模式对话框创建一个部门，如下所示:

部门.组件

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

create() {
    //code omitted for simplicity
}

employee.component

createDepartment() {
    //???
}

另一方面，我有另一个名为员工的组件，我需要通过调用打开的对话框来创建一个部门，并在部门组件中创建方法。

从员工组件创建部门的正确方法是什么？我是否也应该在员工组件中实现 openModal() 和 create() 方法？或者我应该调用部门组件中已经定义的方法？我认为最好使用已经存在的方法和组件以避免重复。

此场景有任何示例方法吗？

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

---

导出类 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)
    })
}



}