Question

我正在制作一个应用程序，该应用程序的布局页面上有汉堡菜单。现在我的问题是，对于菜单根页面，汉堡包菜单还可以，但是当我导航到该页面的子组件时，我必须根据路线或子元素动态显示后退箭头按钮。我该如何在角度8中做到这一点

我尝试使用view child并在任何组件中获取该元素，然后尝试设置其值，例如不显示任何内容，但在子组件中无法访问

我提供了三张图片

1）仪表板，没关系

2）我的视图菜单还可以

3）在“我的视图”中，我选择今天到达，因为我必须动态显示图标

您可以在第二张图片上看到： -i.e client.component.html，其中仅包含菜单而不是客户端组件的子菜单

所以在仪表板菜单中可以
没问题，
，但是当用户导航到myview => arrivaldeparture时。为此，我必须将client.component.html中的菜单图标更改为后退箭头。

Answer 1

您可以想到三种选择... 1.使用ngrx并在那里管理状态（过度杀伤） 2.创建一个带有rxjs主题的服务，并让您的顶级菜单订阅该主题，然后在导航时进行纪律检查，并始终确保按一下该主题，以便您的顶级菜单知道要显示的内容。 3.将ActivatedRoute注入到顶部菜单组件中，并订阅ActivateRoute中的内容，该内容将告诉您它是否为子级。我不确定您的项目或路线是什么样子，因此我无法确切告诉您要观看的内容，但这似乎是最简单的方法。使用这三个选项，您可以只具有两个单独的div，每个div都带有* ngIf语句来确定要显示哪个。

这是第三个选项的示例。

    url$;
    showBackArrow;
    parentUrlEnding = "parent-whatever";

    constructor(private activatedRoute: ActivatedRoute) {
    }
    ngOnInit() {
      this.url$ = this.activatedRoute.url;
      this.url$.subscribe(response => {
        if (response[response.length - 1] == this.parentUrlEnding) {
          this.showBackArrow = false;
        } else {
          this.showBackArrow = true;
      })
    }

如果您知道父URL的外观，则可以将其与当前活动URL进行比较，并确定它是子URL还是父URL，并使用* ngIf语句决定要在HTML中显示的内容

Answer 2

您可以在标题中同时显示两个图标-其中一个始终被隐藏。例如：

1）信息板=>您应基于变量隐藏“后退”箭头，并显示“汉堡包”

2）我的视图=>您应该根据变量隐藏“后退”箭头，并显示“汉堡包”

3）在“我的视图”中，选择“今天到达”：=>您应基于变量隐藏“汉堡”图标并显示“返回”箭头

在这个stackblitz示例中，我有一个类似的示例（只需单击一个项目）： https://stackblitz.com/edit/angular-63sjtx?file=app%2Flist-sections-example.html

如何基于Angular 8中的页面设置诸如后退箭头或菜单之类的标题图标

3 个答案: