角度应用设计

Question

第一篇文章在这里，所以要友好！我将尽量做到最精确和最简洁。

我目前正在开发一个转角/类型记录的GUI，它显示局域网和附近的设备和网络流量。到目前为止，我在应用程序的设计上遇到了一些麻烦。

我有几个设备类：

器件

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: [ ... ]
    ] 
  }

}

BluetoothDevice

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

  }

}

在“我的摘要”组件中有：

SummaryComponent

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中处理这个问题，但是我相信一个角的组件应该有一个单一的接口/数据模型，并且只处理这个。

谢谢你抽出时间:)

Answer 1

我将使用ngSwitch和型护罩来设计它。

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