Angular2 - 如何通过Array加载到定义它们的视图/组件

Question

我有两个数组列表。

• 菜单：这是菜单项列表。在列表中，我还说明了我应该从组件列表中加载哪个组件。
• myComponents：所有组件的列表。

const menu = [
    {id: 1, name: 'One',children:[2,3,4, 5],  menucomponent: 'componentID: 1'},
    {id: 2, name: 'Two', componentID : 2, menucomponent: 'componentID: 2'},
    {id: 3, name: 'Three', componentID : 3, menucomponent: 'componentID: 3'},
    {id: 4, name: 'Four', componentID : 4, menucomponent: 'componentID: 4'},
    {id: 5, name: 'Five', componentID : 5, menucomponent: 'componentID: 5'},
    {id: 6, name: 'Six', children:[3,4], menucomponent: 'componentID: 6'}
];
const myComponents =[
  {id : 1,component: OneComponent},
  {id : 2,component: OneComponent},
  {id : 3},
  {id : 4},
  {id : 5}
];

我已经通过在数组中定义来动态加载大组件框中的内容。我在HTML中注释了

<dynamic-component [componentData]="componentData"></dynamic-component>

启用src / dynamic.component.ts组件时，此方法有效。 我无法理解如何配置plunker来加载：lodash库，而不是为什么我必须取消注释src / dynamic.component.ts。

我似乎无法弄清楚如何加载/定义两个组件。或者，除了为每个菜单项单独定义每个组件之外，还有更聪明的方法吗？

我有一个菜单项列表，当用户点击菜单项时，我想加载一个具有所有特定功能的特定组件，但是我希望在菜单项旁边显示一些功能其余的在下面的大部分中。

例如，当我点击一个菜单项时，我会在旁边显示其他菜单项或输入字段，而不是下面我将显示链接到上面输入字段的其他设置。

如果有任何问题，请告诉我，我已经创建了一个傻瓜：https://plnkr.co/edit/Is1dcGbOYb0y8XpVyMFJ?p=preview

在图像1中，菜单项处于活动状态：