主页 / coding / 问题 / 79439086
Accepted
himtim
Asked: 2025-02-14 18:39:05 +0800 CST

Angular：拥有扩展对象数组-如何正确使用类型？

  • 772

我有一个具有多个扩展的基类，如下所示：

export interface ProjectOnePagerDTO {
  Widgets: IOnePagerWidget[];
  Id: string;
}

export interface IOnePagerWidget extends GridsterItem {
  Type: OnePagerWidgetType;
}

export interface OnePagerWidgetTypePicture extends IOnePagerWidget {
  ProjectLogo: string;
}

export interface OnePagerWidgetTypeProjectDescription extends IOnePagerWidget {
  Text: string;
}

每个扩展（例如 OnePagerWidgetTypePicture）都有自己的组件。在模板中，我循环遍历 ProjectOnePagerDTO 的 Widgets 属性并将每个小部件传递给其组件。OnePagerWidgetTypePicture 的组件如下所示

export class OpwProjectPictureComponent {
  @Input() widget: OnePagerWidgetTypePicture;
}

现在我收到以下错误：Property 'ProjectLogo' is missing in type 'IOnePagerWidget' but required in type 'OnePagerWidgetTypePicture'。

我错过了什么？我是否必须更改 @Input 类型并将其直接转换为组件内部的类型？

angular

1 个回答

  1. Best Answer

    方法 1：

    尝试使用泛型以便它接受多种类型。

    @Component({
  selector: 'app-child',
  template: ``,
})
export class Child<T> {
  @Input() widget!: T;
}

    方法 2：

    尝试使用根据该类型独有的属性确定类型的函数。

    typeIt(widget: CompositeWidgetType) {
  if ((widget as OnePagerWidgetTypePicture).ProjectLogo) {
    return widget as OnePagerWidgetTypePicture;
  } else if ((widget as OnePagerWidgetTypeProjectDescription).Type) {
    return widget as OnePagerWidgetTypeProjectDescription;
  } else {
    return widget as IOnePagerWidget;
  }
}

    完整代码：

    import { Component, Input } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

export class GridsterItem {}

export class OnePagerWidgetType {}

export interface ProjectOnePagerDTO {
  Widgets: IOnePagerWidget[];
  Id: string;
}

export interface IOnePagerWidget extends GridsterItem {
  Type: OnePagerWidgetType;
}

export interface OnePagerWidgetTypePicture extends IOnePagerWidget {
  ProjectLogo: string;
}

export interface OnePagerWidgetTypeProjectDescription extends IOnePagerWidget {
  Text: string;
}

  @Component({
    selector: 'app-child',
    template: ``,
  })
  export class Child<OnePagerWidgetTypePicture> {
    @Input() widget!: OnePagerWidgetTypePicture;
  }

export type CompositeWidgetType =
  | IOnePagerWidget
  | OnePagerWidgetTypePicture
  | OnePagerWidgetTypeProjectDescription;

@Component({
  selector: 'app-root',
  imports: [Child],
  template: `
    @for (widget of Widgets;track $index) {
      @let typedWidget = typeIt(widget);
      <app-child [widget]="typedWidget"/>
    }
  `,
})
export class App {
  Widgets!: Array<CompositeWidgetType>;

  typeIt(widget: CompositeWidgetType) {
    if ((widget as OnePagerWidgetTypePicture).ProjectLogo) {
      return widget as OnePagerWidgetTypePicture;
    } else if ((widget as OnePagerWidgetTypeProjectDescription).Type) {
      return widget as OnePagerWidgetTypeProjectDescription;
    } else {
      return widget as IOnePagerWidget;
    }
  }
}

bootstrapApplication(App);

    Stackblitz 演示

    方法 3：

    如果父组件包含这三个值中的任意一个，那么数组不应该指定相同的值吗？

    这里我们可以指定一个type名称CompositeWidgetType并将其分配给数组。

    export type CompositeWidgetType = IOnePagerWidget | OnePagerWidgetTypePicture | OnePagerWidgetTypeProjectDescription;

export interface ProjectOnePagerDTO {
  Widgets: Array<CompositeWidgetType>;
  Id: string;
}

    现在，当您传递到子组件时，它将采用相应的类型，因为该类型可以是这三种类型中的任何一种。

    • 1

相关问题