類型&#39;typeof Component&#39;的參數不能分配給&#39;ComponentType類型的參數<Component>

Question

我希望有一項服務可以根據調用哪個組件的服務來打開不同的對話框。

這是我服務的代碼。 pictureOfCode

public addEditItem(origin: string, item?: MoneyModel|BudgetItemModel|WorkflowModel|SportItemModel) {
    const dialogRef = this.dialog.open(this.pickDialog(origin), {
      data: {
        item: item ? item : null,
        origin: origin,
      },
      width: '500px',
  });
    dialogRef.afterClosed().subscribe(result => {
        this.data.next(result);
        console.log('The dialog was closed', result ? result : 'by clicking on cancel');
    });
}

public pickDialog(origin: string) {
    switch (origin) {
      case 'workflow': return AddEditWorkflowItemComponent;
      case 'sport': return AddEditSportItemComponent;
    }
}

當我在本地運行它時，它可以工作，但是由於以下錯誤，構建失敗：

類型'typeof AddEditWorkflowItemComponent |的參數 不能將typeof AddEditSportItemComponent分配給類型'ComponentType | TemplateRef'。 類型'typeof AddEditSportItemComponent'不可分配給類型'ComponentType | TemplateRef'。 類型'typeof AddEditSportItemComponent'不可分配給'ComponentType'類型。 類型“ AddEditSportItemComponent”中缺少屬性“作者”，但類型“ AddEditWorkflowItemComponent”中則為必需。

有沒有一種方法可以將switch的返回值從typeof Component轉換為ComponentType？ 或者，有沒有一種方法可以更好地切換對話框打開的組件？ 任何幫助表示贊賞。

Answer 1

從您的圖像AddEditSportItemComponent ， AddEditSportItemComponent缺少道具authors ，因此，要解決您的問題，您可以將pickDialog方法返回以下any ：

  const dialogRef = this.dialog.open((this.pickDialog(origin) as any), {
      data: {
        item: item ? item : null,
        origin: origin,
      },
      width: '500px',
  });

或創造出適合輸入接口AddEditWorkflowItemComponent和AddEditSportItemComponent和治療恢復它的方法。

export interface ComponentType<T = any> {
  new (...args: any[]): T;
}

public pickDialog(origin: string): ComponentType {
    switch (origin) {
      case 'workflow': return AddEditWorkflowItemComponent;
      case 'sport': return AddEditSportItemComponent;
    }
}

如果2個類是不同的，並且您想使用類型安全，則最終將為每個類型創建2個不同的方法。