Angular NGRX规范化侧导航路由树

在我的应用程序中，我有一个sidenav。其结构目前在json文件中定义，但稍后可能由Web服务（基于角色）提供。加载应用程序时，我在

resolve

中加载sidenav，并将其置于存储状态（sidenav状态扩展实体状态）

我为nav项定义了一个模型来映射json对象（简化）：

假设以下结构：

{
  "NavItems": [
    {
      "label": "Home",
      "route": "home"
    },
    {
      "label": "Feature1",
      "route": "feature1",
      "children": [
        {
          "label": "1a",
          "route": "feature1/1a"
        },
        {
          "label": "1b",
          "route": "feature1/1b"
        },
        {
          "label": "1c",
          "route": "feature1/1c",
          "hidden": true
        },
      ]
    },
    {
      "label": "Feature2",
      "route": "feature2",
      "children": [
        {
          "label": "2a",
          "route": "feature2/2a"
        },
        {
          "label": "2b",
          "route": "feature2/2b"
        }
      ]
    }
  ]
}

加载并将其置于状态时，它当然只会产生两个实体（feature1和feature2）

这显然有点违背了建立实体国家的目的，但也有实际意义。例如，我高亮显示了活动管线，但对于隐藏的管线，我希望高亮显示最近的父管线。我确实从路由器状态获取路由，但是如果没有一些逻辑来允许嵌套，就无法直接获取相应的nav项

我希望能够保持json结构的原样（树状），因为这样编写更直观（除了使组件中的迭代更容易）

我该怎么做？加载json/为sidenav组件选择数组时，我是否需要某种类型的

规范化模型

来规范化/取消规范化上述模型的状态

{
  "NavItems": [
    {
      "label": "Home",
      "route": "home"
    },
    {
      "label": "Feature1",
      "route": "feature1",
      "children": [
        {
          "label": "1a",
          "route": "feature1/1a"
        },
        {
          "label": "1b",
          "route": "feature1/1b"
        },
        {
          "label": "1c",
          "route": "feature1/1c",
          "hidden": true
        },
      ]
    },
    {
      "label": "Feature2",
      "route": "feature2",
      "children": [
        {
          "label": "2a",
          "route": "feature2/2a"
        },
        {
          "label": "2b",
          "route": "feature2/2b"
        }
      ]
    }
  ]
}