如何根据 Angular 中的页面设置 Header 后退箭头或菜单等图标 8

Question

我正在制作一个应用程序，其中的布局页面上有汉堡菜单。现在我的问题是，对于菜单根页面，汉堡菜单是可以的，但是当我导航到该页面中的 child 组件时，我必须根据路由或 child 元素动态显示后退箭头按钮。我怎样才能在 angular 8

中实现这个

我已经尝试使用视图 child 并在任何组件中获取该元素并尝试将其值设置为显示 none 但它在 child 组件[=14 中不可访问=]

我提供了三张图片

1)仪表盘，没问题

2) 我认为菜单还可以

3) 在我看来我 select 今天到了，我必须动态显示返回图标

正如您在第二张图片中看到的那样： -即 client.component.html 仅包含菜单，而不是客户端组件 child

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

Answer 1

您可以在页眉中同时显示两个图标 - 其中一个始终处于隐藏状态。例如：

1) 仪表板 => 您应该根据变量隐藏 "Back" 箭头并显示 "Hamburger"

2) 我的视图 => 你应该根据变量隐藏 "Back" 箭头并显示 "Hamburger"

3) 在我的视图中当您 select "today arrival": => 您应该隐藏基于变量的 "Hamburger" 图标并显示 "Back" 箭头

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

相关示例可能是这部分：

<mat-icon [ngClass]="today_arrival ? 'hidden' : ''">Hamburger</mat-icon>
<mat-icon [ngClass]="today_arrival ? '' : 'hidden'">Back</mat-icon>

Answer 2

我推荐你用Ionic，不关心这些。

为了帮助您解决这个问题，您应该告诉我们您是否使用 angular 路由器进行导航。

同时，您可以检查一下：https://angular.io/guide/component-interaction

Answer 3

你有我能想到的三种选择... 1. 使用 ngrx 并在那里管理状态 (Overkill) 2. 创建一个带有 rxjs Subject 的服务，并让你的顶级菜单订阅该主题，然后在导航时遵守纪律，并始终确保推送到该主题，以便你的顶级菜单知道要显示什么。 3. 将 ActivatedRoute 注入您的顶级菜单组件并订阅 activatedRoute 中的内容，这将告诉您它是否是子项。我不确定您的项目或路线是什么样的，所以我无法确切地告诉您要注意什么，但这似乎是最简单的方法。使用所有三个选项，您可以只拥有两个单独的 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 与其进行比较并确定它是子级还是父级并决定在 [=23= 中显示什么] 与 *ngIf statments

如何根据 Angular 中的页面设置 Header 后退箭头或菜单等图标 8

How To Set Header Icon Like Back Arrow or Menu Based on Pages In Angular 8

layout

routing

angular

angular8