Javascript 在Angular中从另一个组件调用模态对话框的正确方法？

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

部门组件

employee.component

另一方面，我有另一个名为employee的组件，我需要通过调用open对话框和department组件中的create方法来创建departmet

从员工组件创建部门的正确方法是什么？我是否也应该在employee组件中实现

openModal（）

和

create（）

方法？或者我应该调用department组件中已经定义的方法吗？我认为最好使用已经存在的方法和组件，以避免重复

---

此场景的任何示例方法？

从组件中提取此数据逻辑，并将其移动到单独的服务

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

编辑：
有了更多信息，特定表单（用于创建部门）将显示在应用程序中的多个位置（在模式和员工组件中）

为此，创建一个组件，该组件包含表单（带有create按钮等）和所需的事件处理程序（例如create department按钮），并在需要时显示该组件（创建部门的实际逻辑应在单独的服务中）

例如，在员工html中

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

---

（MatDialog的文档：）

从组件中提取此数据逻辑，并将其移动到单独的服务

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

编辑：
有了更多信息，特定表单（用于创建部门）将显示在应用程序中的多个位置（在模式和员工组件中）

为此，创建一个组件，该组件包含表单（带有create按钮等）和所需的事件处理程序（例如create department按钮），并在需要时显示该组件（创建部门的实际逻辑应在单独的服务中）

例如，在员工html中

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

（MatDialog的文档：）

---

---

创建一个服务来完成这项工作，并注入到组件中。我在示例

modalService

中有一个服务。但是其他的东西呢？我应该在employee组件中再次创建部门的表单字段吗？给一个示例代码怎么样？我的意思是你可以包装modalService并创建另一个服务的方法，类似的，然后将这个服务注入到这两个组件中。谢谢，但我无法想象。有没有空方法的示例代码？创建一个服务来完成这项工作并注入到您的组件中。我在示例

modalService

中有一个服务。但是其他的东西呢？我应该在employee组件中再次创建部门的表单字段吗？给一个示例代码怎么样？我的意思是你可以包装modalService并创建另一个服务的方法，类似的，然后将这个服务注入到这两个组件中。谢谢，但我无法想象。有空方法的示例代码吗？谢谢回复。在这种方法中，我仍然必须将表单字段传递给服务，因此，我认为必须在ememployee组件中定义department model的表单字段。如果是这样，最好在employee中定义department form字段，并使用打开employee form时使用的方法直接打开它？我不太清楚您的意思。表单字段将是模态的结果（模态可以返回数据）？如果是这样，我看不出有什么理由需要将数据从员工传递到部门。您可能希望将有关新部门的一些信息返回到employee组件，以便将员工连接到该组件。请看一下（使用引导，我不知道您是否使用引导，但一般逻辑是相同的），您可能希望将表单字段值映射到对象（接口）我需要提供一些关于我的情况的补充信息。我在department组件的模式中构建createdepartment表单。我还需要在打开创建员工表单时创建部门（我添加了此表单和创建部门的附加按钮）。单击此添加按钮时，我想创建一个部门。在这一步中，我不确定以下情况中的最佳选择是什么。再次构建创建部门表单，就像我在部门组件中所做的那样，并在员工组件中定义必要的员工创建方法？谢谢回复。在这种方法中，我仍然必须将表单字段传递给服务，因此，我认为必须在ememployee组件中定义department model的表单字段。如果是这样，最好在employee中定义department form字段，并使用打开employee form时使用的方法直接打开它？我不太清楚您的意思。表单字段将是模态的结果（模态可以返回数据）？如果是这样，我看不出有什么理由需要将数据从员工传递到部门。您可能希望将有关新部门的一些信息返回到employee组件，以便将员工连接到该组件。请看一下（使用引导，我不知道您是否使用引导，但一般逻辑是相同的），您可能希望将表单字段值映射到对象（接口）我需要提供一些关于我的情况的补充信息。我在department组件的模式中构建createdepartment表单。我还需要在打开创建员工表单时创建部门（我添加了此表单和创建部门的附加按钮）。单击此添加按钮时，我想创建一个部门。在这一步中，我不确定以下情况中的最佳选择是什么。再次构建创建部门表单，就像我在department组件中所做的那样，并在employee组件中定义必要的员工创建方法？我认为

AddConfigurableProductComponent

只是一个表单组件，不包含任何额外的内容，例如列表？AddConfigurableProduc

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

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

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



}