Angular 角度应用设计

第一个帖子在这里，所以要好！我将尽可能做到最准确、最简洁

我目前正在用Angular/Typescript开发一个GUI，它显示局域网及其附近的设备和网络流量。到目前为止，我的应用程序设计有点问题

我有几个设备类：

设备

export class Device {
  _id: string
  _mac: string
  ...
}

export class LANDevice extends Device {
  _firstSeen: Date
  _status: 'reachable' | 'unreachable'
  _services: Service[]
  ...
}

export class Device {
  ...
  public toSummary(): SummaryModel {
    icon: this._svgIcon(),
    name: this._hostname,
    content: [
      firstSeen: this._firstSeen,
      network: [ ... ]
    ] 
  }

}

export class Device {
  ...
  public toSummary(): SummaryModel {
    icon: this._svgIcon(),
    name: this._hostname,
    content: [
      lastSeen: this._lastSeen,
      macVendor: this._macVendor
    ] 

  }

}

LANDevice

export class Device {
  _id: string
  _mac: string
  ...
}

export class LANDevice extends Device {
  _firstSeen: Date
  _status: 'reachable' | 'unreachable'
  _services: Service[]
  ...
}

export class Device {
  ...
  public toSummary(): SummaryModel {
    icon: this._svgIcon(),
    name: this._hostname,
    content: [
      firstSeen: this._firstSeen,
      network: [ ... ]
    ] 
  }

}

export class Device {
  ...
  public toSummary(): SummaryModel {
    icon: this._svgIcon(),
    name: this._hostname,
    content: [
      lastSeen: this._lastSeen,
      macVendor: this._macVendor
    ] 

  }

}

我有其他的类来描述其他类型的设备，比如蓝牙、蓝牙设备等。 我希望有几个组件（摘要、服务和漏洞以及活动）可以显示这些设备的一些信息

我面临的问题是，根据设备类型，要显示的信息将非常不同

我如何设计我的组件和类来处理这个用例？ 我是否应该在每个设备类中都有一个functon来向相关组件公开“正确”的模型（但我需要为每个组件编写一个函数，所以我认为这不是一个好主意）

设备

export class Device {
  _id: string
  _mac: string
  ...
}

export class LANDevice extends Device {
  _firstSeen: Date
  _status: 'reachable' | 'unreachable'
  _services: Service[]
  ...
}

export class Device {
  ...
  public toSummary(): SummaryModel {
    icon: this._svgIcon(),
    name: this._hostname,
    content: [
      firstSeen: this._firstSeen,
      network: [ ... ]
    ] 
  }

}

export class Device {
  ...
  public toSummary(): SummaryModel {
    icon: this._svgIcon(),
    name: this._hostname,
    content: [
      lastSeen: this._lastSeen,
      macVendor: this._macVendor
    ] 

  }

}

蓝牙设备

export class Device {
  _id: string
  _mac: string
  ...
}

export class LANDevice extends Device {
  _firstSeen: Date
  _status: 'reachable' | 'unreachable'
  _services: Service[]
  ...
}

export class Device {
  ...
  public toSummary(): SummaryModel {
    icon: this._svgIcon(),
    name: this._hostname,
    content: [
      firstSeen: this._firstSeen,
      network: [ ... ]
    ] 
  }

}

export class Device {
  ...
  public toSummary(): SummaryModel {
    icon: this._svgIcon(),
    name: this._hostname,
    content: [
      lastSeen: this._lastSeen,
      macVendor: this._macVendor
    ] 

  }

}

在我的总结部分中：

汇总组件

export interface SummaryModel {
  icon: <Base64>,
  name: string,
  content: []
}


export class SummaryComponent {
  ...

  **Parsing of device.toSummary() function with keys/values with table-like display**
  **Key1: Value1
  **Key2: Value2
  **...

}

导出接口摘要模型{
图标：，
名称：string，
内容：[]
}
导出类摘要组件{
...
**使用键/值分析device.toSummary（）函数，并以类似表格的方式显示**
**键1：值1
**键2：值2
**...
}

有人有更好的主意吗？ 这里的主要问题是，根据设备类型，我不想显示相同的内容。我可以检查设备类型并在组件或HTML中处理它，但我相信Angular中的组件应该有一个单一的接口/数据模型，并且只处理这个

---

感谢您的时间：）

我将使用和来设计它

---

您可以让您的组件显示开关的任何一种情况，这取决于某个表达式的结果，该表达式通过逻辑确定实体的底层类型。

谢谢您的回复！这就是我目前正在做的，我想我会坚持下去：）