angular - 为 Angular 应用程序设计

Question

第一次在这里发帖所以很好!我会尽量做到最精确和简洁。

我目前正在使用 Angular/Typescript 开发一个 GUI，它可以显示 LAN 和附近的设备和网络流量。到目前为止，我在设计应用程序时遇到了一些麻烦。

我有几个设备类:

设备

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

LANDevice

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

我还有其他类来描述其他类型的设备，如蓝牙、BLE 设备等。我想要几个组件(摘要、服务和漏洞以及事件)来显示有关这些设备的一些信息。

我面临的问题是，根据设备类型，显示的信息会大不相同。

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

设备

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
    ] 

  }

}

在我的 Summary 组件中有:

摘要组件

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

}

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

感谢您的宝贵时间 :)

Answer 1

我会使用 ngSwitch 来设计它和 type guards .

您可以根据某些表达式的结果让您的组件显示开关的任何情况，这些表达式执行逻辑以确定实体是什么基础类型。