Question

我想创建一个JSON对象，其中包含Angular 6应用程序中每个路由的帮助文本。

let helpRoutes = {
 'wizard/{some_id}/step1': 'This is help content for step 1',
 'wizard/{some_id}/step2': 'This is help content for step 2',
 'user/details/{some_id}/tab1': 'This is help content for user details with activated tab 1'
 'user/details/{some_id}/tab2': 'This is help content for user details with activated tab 2'
}

因此，如果我想访问任何screen_id的步骤1的帮助，我应该通过以下方式获得帮助：

helpRoutes['wizard-fa/123456/step4'];

上面的代码显然是不正确的，给了我“未定义”，这就是为什么我问这个问题。

我们可以使用JSON的键值对实现我想做的事情吗？

如果是，那么如何。如果没有，那还有什么选择？

谢谢。

Answer 1

在路线中，您可以添加静态数据

{ path: 'my-route', component: MyComponent, data: {
  help: 'This is help content for component'
}}

您可以将其与ActivatedRoute的实例一起使用

constructor(
  route: ActivatedRoute
) {
  console.log(route.data);
}

Answer 2

代替

let helpRoutes = {
 'wizard/{screen_id}/step1': 'This is help content for step 1',
 'wizard/{screen_id}/step2': 'This is help content for step 2'
}

您可以将其写为

let helpRoutes = {
 'step1': 'This is help content for step 1',
 'step2': 'This is help content for step 2'
}

使用 / 分隔符提取最后一个单词，并从json获取数据。就像路线是 wizard/1234/step1，得到最后一个单词step1，然后得到help[step1]。

这可以是一种方法。

Answer 3

是的，您可以通过在调用helproute对象之前分配屏幕ID来实现。如果希望screen_id是动态的，则必须首先将值赋给该对象。请参见示例

   let helpRoutes = {};
    for(let screen_id=0;screen_id<10;screen_id++){
        helpRoutes[`wizard/${screen_id}/step1`] =`This is help content for step ${screen_id}`;
    }

在分配了helproutes值之后，您可以获取该值。

helpRoutes['wizard/2/step1']

Angular-创建JSON对象以存储与每个路由关联的数据

3 个答案: