如何实现导航栏上下文菜单答案

【问题标题】：How to implement Navbar contex menu如何实现导航栏上下文菜单
【发布时间】：2019-06-20 00:31:39
【问题描述】：

我有一个导航栏组件，它有一些应用程序级别的菜单，无论用户在哪个页面上都可以看到这些菜单。

此外，应用程序还需要一些上下文导航栏菜单，同样，这取决于用户在哪个页面上找到自己。

在考虑了这个问题并以我目前的知识后，我想创建一个 NavbarContextMenuService 并在导航栏中使用 observables 订阅此服务。最后，我会在需要它的组件中注入 NavbarContextMenuService，以清除导航栏上下文菜单区域或注入当前组件的上下文菜单。

我还没有要显示的代码。我的意图是有一个好的概念起点，这样我就不会在以后进行不必要的重构。

【问题讨论】：

您对服务的想法是正确的。您应该使用角度材料 CDK 中的门户搜索示例。见material.angular.io/cdk/portal/overview
感谢您的回答。我不允许使用材料库。稍后我会发布我的解决方案！
这样的限制毫无意义 IMO
如果你打算动态嵌入组件并且没有模板，你也可以使用 ngComponentOutlet
在阅读了有关 ngComponentOutlet 的内容后，我最终只是稍微更改了实现，但它变得更加简洁、易读，并且我学到了一些新东西。谢谢您的回答。顺便问一下，你同意实施吗？

标签： angular

【解决方案1】：

接下来是我的解决方案，我希望能提供一些关于实现/代码质量的反馈。

NavbarContexMenuService

@Injectable({
  providedIn: 'root'
})
export class NavbarContextMenuService {

  contextMenu: Subject<any> = new Subject<any>();

  constructor() {}
}

导航栏组件模板（这里我设置了一个“插槽”#contextMenu，以便能够在应用程序级菜单旁边动态注入上下文菜单）

  <!-- contextual menu -->
  <ng-template *ngComponentOutlet="contextMenu"></ng-template>

  <!-- notifications menu -->
  <jhi-notifications></jhi-notifications>

  <!-- applications menu -->
  <jhi-applications></jhi-applications>

导航栏组件类

contextMenu: any;

constructor(
    private navbarContexMenuService: NavbarContextMenuService
  ) {}

ngOnInit() {
     this.navbarContexMenuService.contextMenu.subscribe(ctxMenu => {
     this.contextMenu = ctxMenu;
});
  }

一些随机组件

constructor(private navbarContextMenuService: NavbarContextMenuService) {}

ngOnInit() {
    this.navbarContextMenuService.contextMenu.next(CmContextMenuComponent);
}

ngOnDestroy(): void {
    // clear navbar contextual menu
    this.navbarContextMenuService.contextMenu.next();
}

【讨论】：

【解决方案2】：

您不需要任何服务，只需创建一个类似NavBar 的组件并在您的app-component 中使用。只需在下面添加router-outlet 即可浏览您的路由器。

应用组件

<div>
    <app-navbar></app-navbar>
  </div>
  <router-outlet></router-outlet>
</div>

【讨论】：

我不确定我是否理解您的建议。但是根据您的代码，我看不到如何呈现动态导航栏上下文菜单