Angular 角度2动态菜单

我在玩Angular 2。 目前，我想知道实现动态菜单组件的最佳方法是什么。 其想法是拥有一个全局菜单组件，用于接收应用程序中每个其他内容组件的菜单项

一个想法是，拥有一个menu.component、一个menu.service和其他使用该服务的组件。该服务在app.module中全局引用。 menu.components订阅一个可观察的组件，并动态添加粘贴的项目。我认为这不是最好的解决办法

另一个想法是，我将菜单选择器/标记放在每个组件模板中，并将数据直接粘贴到菜单组件。目前，我一直在研究如何将项目添加到menu.component，以便ngFor在初始化后生成菜单项

所以问题是：有没有什么最佳实践或通用方法可以做到这一点

我想在Angular 2中我需要更多的基础知识，但如果你能引导我走上正确的道路，那就太好了。这只是一个学习项目：

以下是我尝试过的一些代码：

app.module.ts

从“@angular/core”导入{NgModule}； 从“@angular/platform browser”导入{BrowserModule}； 从'@angular/HTTP'导入{HTTP_PROVIDERS}； 从“./app.component”导入{AppComponent}； 从“/app.routes”导入{appRouterProviders}； 从“./menu.component”导入{MenuComponent}； 从“./home.component”导入{HomeComponent}； @NGD模块{ 导入：[BrowserModule]， 声明： [ 应用组件 ], 引导：[AppComponent]， 供应商： [ MenuComponent， 认可供应商， HTTP\U提供程序 ] } 导出类AppModule{} menu.component.ts

从'@angular/core'导入{Component}； 从“@angular/ROUTER”导入{ROUTER_DIRECTIVES}”； 导出类菜单项{ 名称：字符串； 路径：字符串； } @组成部分{ 选择器：“组件菜单”， 模板：` {{item.name} ` } 导出类菜单组件{ 公共菜单项：数组； 建造师{ } } home.component.ts

从“@angular/core”导入{Component，OnInit}； 从“./menu.component”导入{MenuComponent，MenuItem}； @组成部分{ 选择器：“应用程序主页”， 指令：[]， 模板：`主组件 ` } 导出类HomeComponent实现OnInit{ 私有菜单项：数组； 构造函数私有菜单组件：菜单组件{ console.log'Home component-ctor'； this.menuItems=[ {名称：'Home'，路径：'/Home'}， {名称：'Content'，路径：'/Content'} ]; this.menuComponent.menuItems=this.menuItems； } 恩戈尼特{ } }

---

读了这个问题后，我想到的第一件事是路线。 您可以使用嵌套管线来创建这样的菜单。重新加载页面后，您将进入同一页面。 此外，如果需要此类功能，可以根据当前路线生成不同的菜单项

要动态更改路由，可以使用resetConfig方法。

对于父组件，请使用路径匹配的前缀类型

另一个可能的pathMatch值是“prefix”，它告诉路由器在剩余URL以重定向路由的前缀路径开始时匹配重定向路由

要在组件之间同步数据，请使用主应用程序文件提供的服务

如果您需要更动态的方法，那么使用编译器将组件注入到视图中。

---

读了这个问题后，我想到的第一件事是路线。 您可以使用嵌套管线来创建这样的菜单。重新加载页面后，您将进入同一页面。 此外，如果需要此类功能，可以根据当前路线生成不同的菜单项

要动态更改路由，可以使用resetConfig方法。

对于父组件，请使用路径匹配的前缀类型

另一个可能的pathMatch值是“prefix”，它告诉路由器在剩余URL以重定向路由的前缀路径开始时匹配重定向路由

要在组件之间同步数据，请使用主应用程序文件提供的服务

如果您需要更动态的方法，那么使用编译器将组件注入到视图中。

---

我已经在我的项目中实现了你想要的东西。我是这样做的：

1-我创建了一个名为ContextMenuService的服务，负责实例化上下文菜单

2-我创建了一个ContextMenu组件，它是要显示的实际菜单

3-服务动态创建组件，并且每当菜单外出现单击时，服务就会销毁菜单组件

服务内容如下：

@注射的 导出类ContextMenuService{ private _menuAlreadyOn:boolean=false； private\u currentContextMenu:ComponentRef

---

我希望这可以帮助您创建自己的自定义上下文菜单。我已经在我的项目中实现了您想要的内容 它：

1-我创建了一个名为ContextMenuService的服务，负责实例化上下文菜单

2-我创建了一个ContextMenu组件，它是要显示的实际菜单

3-服务动态创建组件，并且每当菜单外出现单击时，服务就会销毁菜单组件

服务内容如下：

@注射的 导出类ContextMenuService{ private _menuAlreadyOn:boolean=false； private\u currentContextMenu:ComponentRef

---

我希望这可以帮助您创建自己的自定义上下文菜单

动态菜单非常通用。您没有对菜单提供任何要求。这个问题也是关于意见的，不鼓励这样做。好的-想法是有一个单独的菜单组件，每个内容组件都有自己的菜单项可以传输对于这个菜单组件。听起来很简单。我认为这是一个常见的用例。请编辑您的问题，并发布代码，演示您尝试完成的任务以及失败的地方。问题更多的是，与获得特定代码的帮助相比，实现这样一个全局菜单组件的最佳方式是什么。但是特定代码使它成为可能更容易理解您实际要完成的任务。请查看“帮助”菜单，了解哪些问题不需要问，以及如何提出好的问题。具体的编程问题也是如此。好的问题通常包含代码，说明尝试了什么，失败了什么，以及具体的错误消息（如果适用）。有关讨论，请使用其他渠道更合适。动态菜单非常通用。您没有提供菜单的任何要求。这个问题也是关于意见的，不鼓励这样做。好的-想法是，有一个单独的菜单组件，每个内容组件都有自己的菜单项，可以传输到此菜单组件。听起来非常简单。我认为nk这是一个常见的用例。请编辑您的问题并发布代码，以演示您尝试完成的任务以及失败的地方。问题更多的是，实现此类全局菜单组件的最佳方式是什么，而不是获取特定代码的帮助。但是特定代码使您更容易掌握实际尝试完成的任务。请查看“帮助”菜单，了解哪些问题不可以问，以及如何问好问题。具体的编程问题也是如此。好的问题通常包含代码，说明尝试了什么，失败了什么，以及具体的错误消息（如果适用）。对于讨论，其他渠道更合适。

constructor(
    private compiler:Compiler,
    private viewContainerRef:ViewContainerRef){}

...

this.compiler.compileComponentAsync(yourComponentClass).then((cmpFactory)=>{
      const injector = this.viewContainerRef.injector;
      this.viewContainerRef.createComponent(cmpFactory, 0,  injector);
    });