Angular：在嵌套数组中查找键/值

Question

描述：
我有一个module.ts，它有一个const route来处理路由。在此路线中，我在data下有一个名为sidebar的密钥。

const routes: Routes = [{
  path: 'devices',
  component: BaseComponent,
  children: [{
    path: '',
    component: DeviceListComponent,
    data: {
      sidebar: true
    }
  }]
}];

我想做什么：
我希望能够在component.ts中查看此数组，如果找到sidebar且sidebar的值为true，则path名称将显示在a div。
例如，对于path:'device'，sidebar为真，因此我的div会在其中显示device的文字。

我尝试做什么/问题：
我无法弄清楚如何找到sidebar密钥。在我的component.ts文件中，我可以通过router.config成功获取数组，但我无法找出找到密钥的逻辑。

ngOnInit() {     
  var theArray= this.router.config; //Grabs array successfully!
  for (let obj of theArray) {
    console.log("object:", theArray); //prints our array
    for (let sidebar in obj) {
      console.log("key:", sidebar, "value:", obj[sidebar]); 
    }
  }
}

我从第二个console.log获得的结果是：

Answer 1

我认为这里的主要问题是你不应该做你正在做的事:) 当然，有一种方法可以通过以某种复杂的方式解析路由器配置来实现您想要做的事情 - 但是您希望通过使用预期的方式来实现您想要实现的目标。

一种方法是使用Angular的resolve-data功能，以便将所需的变量提供到组件中。

所以你的路线看起来像这样

{
    path: '',
    component: DeviceListComponent,
    resolve: {
      sidebar: true
    }
}

虽然在你的组件中你会做这样的事情

constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.hasSidebar= this.route.snapshot.data['sidebar'];
  }

有关该主题的更深入的教程，您可以查看此博客文章，例如： https://blog.thoughtram.io/angular/2016/10/10/resolving-route-data-in-angular-2.html

Answer 2

也许有一种更“角度”的方式可以做到这一点，但如果没有，你需要深入研究那个路线对象。

ngOnInit() {

    var theArray= this.router.config; //Grabs array successfully!

    for (let config of theArray) {
       const path = config.path;
       if ('children' in config) {
           const child = config['children'][0];
           if ('data' in child && child['data'].sidebar) {
               // do whatever you need in here
           }
       }
   }
}