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

Question

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

department.component

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

create() {
    //code omitted for simplicity
}

employee.component

createDepartment() {
    //???
}

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

从员工组件创建部门的正确方法是什么？我是否也应该在员工组件中实现 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)
    })
}



}

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

Proper way to call modal dialog from another component in Angular?

javascript

components

modal-dialog

typescript

angular

导出 class CampaignConfigurableProductsComponent 实现 OnInit、AfterViewInit { }