描述:
我有一个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获得的结果是:
答案 0 :(得分:0)
我认为这里的主要问题是你不应该做你正在做的事:) 当然,有一种方法可以通过以某种复杂的方式解析路由器配置来实现您想要做的事情 - 但是您希望通过使用预期的方式来实现您想要实现的目标。
一种方法是使用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
答案 1 :(得分:0)
也许有一种更“角度”的方式可以做到这一点,但如果没有,你需要深入研究那个路线对象。
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
}
}
}
}